React项目中@font-face无法加载本地字体的问题求助

问题背景 #

项目目录结构如下：

├── src
│   ├── fonts
│   │   ├── font.ttf
│   ├── components

在组件的样式文件内通过@font-face声明自定义字体后，字体未正常生效，仅回退为系统字体，甚至覆盖了index.scss中设置的全局字体。

组件内样式代码：

@font-face {
  font-family: "MyFont";
  src: local("MyFont"), url("path/to/font.ttf"),
    format("truetype");
}

p {
    font-family: 'MyFont'
}

全局index.scss代码：

html,
body {
  font-family: "Roboto", "Arial", sans-serif;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: "Roboto", "Arial", sans-serif;
}

核心问题排查与解决 #

1. 先把字体路径搞对 #

你说路径正确，但这是最容易踩坑的点。React样式文件中的url路径是相对于当前样式文件所在位置的，不是相对于src根目录。
比如你的组件样式文件在src/components/MyComponent下，那指向src/fonts/font.ttf的路径应该是../fonts/font.ttf；如果组件嵌套更深，就得对应增加../层级。
或者用更稳妥的方式：把字体放到public/fonts目录，此时路径可以直接写/fonts/font.ttf（因为public是项目的静态资源根目录）。

修正后的@font-face示例（假设样式文件在src根目录）：

@font-face {
  font-family: "MyFont";
  src: url("./fonts/font.ttf") format("truetype");
  /* 删掉local("MyFont")：如果本地没有同名字体，这行只会起干扰作用 */
}

2. 字体声明放到全局样式更靠谱 #

在组件内声明@font-face会导致两个问题：一是多组件使用时重复加载字体，二是样式优先级容易和全局样式冲突。
建议直接把@font-face放到全局的index.scss最顶部，这样整个项目都能复用，还能避免重复声明：

/* 先声明自定义字体 */
@font-face {
  font-family: "MyFont";
  src: url("./fonts/font.ttf") format("truetype");
}

/* 原有全局样式 */
html,
body {
  font-family: "Roboto", "Arial", sans-serif;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: "Roboto", "Arial", sans-serif;
}

3. 给字体加回退选项，避免直接跳系统字体 #

你的组件内p标签只写了font-family: 'MyFont'，一旦字体加载失败就会直接回退到系统默认字体，覆盖全局的Roboto。给字体加上回退链即可解决：

p {
  font-family: 'MyFont', "Roboto", "Arial", sans-serif;
}

4. React字体存放位置：没有强制要求，但统一规范更省心 #

官方没有指定必须放哪里，只要在src或public目录内都可以，常见的两种方案：

• 放src/fonts：会被webpack打包处理，需要注意相对路径
• 放public/fonts：属于静态资源，路径直接写/fonts/font.ttf即可，无需考虑层级，更适合新手

5. 额外检查项 #

• 确认字体文件没有损坏：双击font.ttf，看系统能否正常显示字体内容
• 清空浏览器缓存：有时候加载失败是缓存导致的
• 补充多格式字体：.ttf支持大部分现代浏览器，但如果要兼容更老版本，可以同时提供.woff/.woff2格式，扩展@font-face：

@font-face {
  font-family: "MyFont";
  src: url("./fonts/font.woff2") format("woff2"),
       url("./fonts/font.woff") format("woff"),
       url("./fonts/font.ttf") format("truetype");
}

内容的提问来源于stack exchange，提问作者Yehuda