Create React App中Sass混合宏引入Web Font不渲染问题排查

我帮你梳理下几个核心问题，都是Create React App（CRA）配合Sass引入Web Font时常见的坑：

1. 首先修复Sass混合宏的写法问题 #

你当前的混合宏里重复写了三次src属性，后面的声明会直接覆盖前面的——浏览器只会尝试加载最后那个.ttf文件，这不仅浪费了其他字体格式的兼容性，还可能导致部分不支持TTF的浏览器直接失效。

改成标准的@font-face兼容写法，让所有字体格式都能被浏览器按优先级加载：

@mixin font-face($font-family, $file-path) {
  @font-face {
    font-family: $font-family;
    // IE9兼容模式
    src: url('#{$file-path}.eot');
    // IE6-IE8兼容写法
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
         // 现代浏览器优先加载woff
         url('#{$file-path}.woff') format('woff'),
         // 移动端/旧浏览器加载ttf
         url('#{$file-path}.ttf') format('truetype');
    // 可选：如果有woff2格式，放在最前面优先级更高
    // url('#{$file-path}.woff2') format('woff2'),
    font-weight: normal;
    font-style: normal;
  }
}

2. 适配Create React App的资源打包规则 #

CRA用webpack处理静态资源，字体文件的路径不能随便写，有两种可靠的处理方式：

方式一：把字体放在public文件夹下 #

将字体文件移动到项目根目录的public/fonts文件夹里，然后用绝对路径引用（public下的资源会被直接复制到打包后的根目录）：

@include font-face(Roboto-Regular, '/fonts/Roboto-Regular');

这种方式不需要额外配置，适合快速解决问题。

方式二：字体放在src/assets/fonts下，通过import让webpack识别 #

如果想把字体放在src目录内，需要先在组件文件或Sass入口文件里引入字体，让webpack把它纳入打包流程：

// 在你的组件js文件或全局Sass入口里添加
import '../../assets/fonts/Roboto-Regular.eot';
import '../../assets/fonts/Roboto-Regular.woff';
import '../../assets/fonts/Roboto-Regular.ttf';

然后用CRA支持的~别名指向src目录，避免相对路径混乱：

@include font-face(Roboto-Regular, '~assets/fonts/Roboto-Regular');

3. 最后验证两点 #

• 确保使用字体时正确指定了font-family：

.your-component {
  font-family: 'Roboto-Regular', sans-serif;
}

• 打开浏览器开发者工具的Network标签，检查字体文件是否成功加载（如果出现404，说明路径还是不匹配，再核对文件位置和引用路径）。

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