如何在 React 项目中包含自定义字体 - CSS

在 React 项目中使用自定义字体是一种常见的需求。下面是一些步骤，可帮助您在 React 项目中包含自定义字体的 CSS 文件。

步骤

1. 首先，将您的自定义字体文件添加到 React 项目的某个目录中。建议将它们放在public目录的fonts子目录中。

2. 在您的CSS文件中，为每个自定义字体文件分别定义一个@font-face规则，如：

@font-face {
  font-family: 'MyFontRegular';
  src: url('../fonts/MyFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这个@font-face规则给您的字体一个名称（'MyFontRegular'），并指定了字体位置（'../fonts/MyFont-Regular.ttf'）以及字体的格式（'truetype'）。您还可以指定字体的字重和样式。

3. 在样式中，使用您所定义的字体名称，如：

body {
  font-family: 'MyFontRegular', sans-serif;
}

4. 最后，将您的CSS文件引入到您的React组件或HTML页面中。您可以通过将样式表链接添加到HTML页面的头部，或将其导入到您的React组件中。

支持的字体格式

@font-face规则当前支持以下字体类型：

• TrueType字体（TTF）
• OpenType字体（OTF）
• Web Open Font Format字体（WOFF）
• Web Open Font Format 2.0字体（WOFF2）

结论

现在您已经知道了如何在React项目中包含自定义字体的CSS文件。

总结一下以上步骤：

1. 将字体文件添加到您的React项目中
2. 在CSS文件中定义一个@font-face规则来声明字体
3. 在样式中使用您定义的字体名称
4. 将CSS文件链接到您的HTML页面或React组件中。

祝您顺利实现自定义字体！