Question

我已经在这个问题上进行了几天的搜索和尝试，但是我仍在努力使Safari显示带有样式组件的自定义字体（在FF和Chrome中可以正常工作）

这是在我的globalstyles.js中

import { createGlobalStyle } from 'styled-components'
export default createGlobalStyle`
  @font-face {
    font-family: 'Langdon';
    font-style: normal;
    font-weight: normal;
    src: local(Langdon), 
    url('./fonts/langdon-webfont.ttf') format(truetype), 
    url('./fonts/langdon-webfont.woff') format(woff),
    url('./fonts/langdon-webfont.woff2') format(woff2);
  }

globalstyles.js被导入到我的layout.js

然后我在组件中使用它：

const RocketShipTitle = styled.h1`
  color: #cc9056;
  padding-top: 50px;
  padding-left: 50px;
  font-family: Langdon, sans-serif;
  font-size: 5rem;
  font-weight: 100;
`

有人有创意吗？

谢谢

Answer 1

遇到了同样的问题 - 我能够通过将字体导入 index.js 中的 /fonts 文件并导出来使其工作，所以在您的情况下：

import LangdonWOFF "./fonts/langdon-webfont.woff"
import LangdonTTF "./fonts/langdon-webfont.ttf"

export { LangdonWOFF, LandonTTF }

然后在globalstyles.js中导入和使用

import * as font from "./fonts"


@font-face {
    font-family: 'Langdon';
    src: url(${font.LangdonTTF}) format(truetype), 
    url(${font.LangdonWOFF}) format(woff);
}

自托管字体无法在Safari的Gatsby中使用

1 个答案: