使用Sass+React+create-react-app时本地字体无法正常显示

可能的原因及解决步骤 #

1. 确认字体文件的存放位置与路径匹配 #

Create React App（CRA）对静态资源的处理有明确规则：

• 如果使用public目录：在项目根目录的public下创建assets/fonts文件夹，将所有字体文件放入其中。此时@font-face中的绝对路径/assets/fonts/xxx是正确的，因为public是开发服务器的根目录。
• 如果使用src目录：将字体文件放在src/assets/fonts中，此时需要使用相对路径编写@font-face的url。例如你的Sass文件在src/styles/main.scss，路径应改为：

  src: url('../assets/fonts/poppins-v20-latin_latin-ext-200.eot');
  src: url('../assets/fonts/poppins-v20-latin_latin-ext-200.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/poppins-v20-latin_latin-ext-200.woff2') format('woff2'),
       url('../assets/fonts/poppins-v20-latin_latin-ext-200.woff') format('woff'),
       url('../assets/fonts/poppins-v20-latin_latin-ext-200.ttf') format('truetype'),
       url('../assets/fonts/poppins-v20-latin_latin-ext-200.svg#Poppins') format('svg');
  

  绝对路径/assets/...会指向public目录而非src，这是最常见的路径错误。

2. 检查字体文件完整性 #

Chrome的「Failed to decode downloaded font」和Firefox的「rejected by sanitizer」报错，大概率是字体文件损坏或不完整。解决方法：

• 直接从Google Fonts官网重新下载对应字体的完整压缩包，解压后提取所需字重的文件（如200字重的woff2/woff/ttf等），替换现有文件。

3. 清除浏览器缓存 #

浏览器可能缓存了之前错误的字体文件，导致新文件无法正常加载：

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面；
• 打开浏览器开发者工具的「Network」面板，勾选「Disable cache」选项，再刷新页面测试。

4. 验证font-family名称一致性 #

确保@font-face中定义的font-family: 'someName'与你在类.someClassName中使用的font-family: 'someName'完全一致，包括引号、大小写和拼写。

5. 通过import引入字体（可选方案） #

如果字体放在src目录，也可以在主JS文件（如src/index.js）或主Sass文件中直接import字体文件，让Webpack自动处理路径：

// 在index.js中引入
import './assets/fonts/poppins-v20-latin_latin-ext-200.woff2';
import './assets/fonts/poppins-v20-latin_latin-ext-200.woff';
import './assets/fonts/poppins-v20-latin_latin-ext-200.ttf';

之后@font-face中的相对路径依然有效，Webpack会自动生成正确的资源URL。

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