首先,我知道那可能是愚蠢的。字体总是给我带来麻烦,以某种方式很难找到这样的普遍信息。所有在线教程都使它看起来非常简单(包括Gatsby自己的教程),没有人真正涵盖潜在问题。
我正在使用本指南,很简单,但它给出了一个主意:在单独的CSS文件中声明@ font-face,然后将该文件导入您的应用中。所以这是我的结构:
src/
┣ assets/
┃ ┗ fonts/
┃ ┣ DMSerifDisplay-Italic.ttf
┃ ┣ DMSerifDisplay-Regular.ttf
┃ ┗ fonts.css
┣ components/
┃ ┣ ...
┃ ┗ layout.tsx
┗ pages/
┣ 404.tsx
┗ index.tsx
两种字体都导入fonts.css中,如下所示:
@font-face {
font-family: 'DM Serif Display';
src: url('./DMSerifDisplay-Regular.ttf') format('ttf');
}
@font-face {
font-family: 'DM Serif Display';
font-style: italic;
src: url('./DMSerifDisplay-Italic.ttf') format('ttf');
}
然后将该文件导入layout.tsx(这是任何页面的基础)中:
import React, { FC } from 'react'
import { Header } from './header'
import { Footer } from './footer'
import { GlobalStyles } from './global-styles'
import { ThemeProvider } from 'styled-components'
import { theme } from './sc-theme'
import '../assets/fonts/fonts.css'
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
export const Layout: FC = ({ children }) => {
return (
<ThemeProvider theme={theme}>
<GlobalStyles />
<Header />
<main>{children}</main>
<Footer />
</ThemeProvider>
)
}
但是,我看不到网络选项卡中导入的字体。我尝试将一些样式添加到fonts.css中,但确实可以加载它们,因此文件位于文件包中,但没有字体。让我知道其他信息是否有帮助。
你可以试试看吗?
@font-face {
font-family: 'DM Serif Display';
src: local('DM Serif Display'), url('./DMSerifDisplay-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'DM Serif Display';
font-style: italic;
src: local('DM Serif Display'), url('./DMSerifDisplay-Italic.ttf') format('truetype');
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句