Css 如何将本地字体导入盖茨比网站？

首先，我知道这可能是一个愚蠢的想法。字体总是给我带来麻烦，不知怎的，这样一个普通的东西真的不容易找到信息。所有在线教程都让它看起来非常简单（包括盖茨比自己的），没有人真正涵盖潜在的问题

我正在使用，它很简单，但它给出了一个想法：在一个单独的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}来自“React”
从“./Header”导入{Header}
从“/Footer”导入{Footer}
从“./global styles”导入{GlobalStyles}
从“样式化组件”导入{ThemeProvider}
从“/sc-theme”导入{theme}
导入“../assets/fonts/fonts.css”
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
导出常量布局：FC=（{children}）=>{
返回(
{儿童}
)
}

但是，我看不到在“网络”选项卡中导入字体。我尝试将一些样式添加到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');
}

---

成功了！我尝试了一些变化，这是关于格式的。

local

函数会做什么？首选本地字体（如果已安装）？如果您有描述字体系列的本地文件，则不会执行

url

功能

@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');
}