React中@font-face自定义字体无法生效问题求助

以下是几个排查和修复的方向：

• 修正@font-face语法错误
  你当前的@font-face规则里，src行末尾多了个多余的逗号，这会导致浏览器解析规则失败。修改成：

  @font-face {
      font-family: "Raleway";
      src: url(../assets/fonts/Raleway/Raleway-VariableFont_wght.ttf) format(truetype);
  }
  

• 检查字体文件路径
  相对路径是相对于CSS文件的位置，不是导入CSS的JS文件。打开浏览器开发者工具的Network面板，刷新页面后看字体文件是否返回404：

  • 如果是404，调整路径为正确的相对路径，或者改用项目根目录为基准的绝对路径（比如url('/assets/fonts/Raleway/Raleway-VariableFont_wght.ttf')，具体取决于你的项目静态资源配置）。
  • 如果能正常加载，继续排查其他问题。

• 验证样式是否被覆盖
  打开浏览器Elements面板，查看body元素的computed样式，确认font-family的最终值是否包含"Raleway"：

  • 如果被其他高优先级样式（比如id选择器、内联样式）覆盖，需要调整选择器优先级，或者直接在body的font-family前加!important临时测试（不推荐长期使用，优先调整优先级）。
  • 可以临时把font-family改成"Raleway", monospace，如果页面字体变成等宽样式，说明Raleway确实未加载；如果没变化，说明样式根本没生效，检查CSS是否正确导入。

• 检查字体文件完整性
  确认Raleway字体文件没有损坏，尝试替换成官方下载的完整字体文件，再测试是否能正常加载。

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