如何在Sass配置中导入.woff2字体文件并完成正常调用

1. 修正@font-face错误写法 #

你当前将不同字重的字体文件放在同一个@font-face的src属性下是错误的，不同字重需要单独声明：

// 声明常规字重
@font-face {
  font-family: 'Gellix';
  src: url("../../assets/img/brand/Gellix-Regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
}
// 声明粗体字重
@font-face {
  font-family: 'Gellix';
  src: url("../../assets/img/brand/Gellix-Bold.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
}

注意：所有@font-face的font-family名称必须完全统一，后续引用时不能出现拼写差异

2. 调整Sass文件导入顺序 #

@font-face的声明必须放在字体变量定义之前，你可以单独把字体声明抽为_fonts.scss文件，在入口scss文件中按如下顺序导入：

// 入口scss文件（如main.scss）导入顺序
@import './fonts'; // 优先加载字体声明
@import './variables'; // 再加载字体相关变量
// 后续导入其他业务样式文件

如果@font-face声明放在变量之后，浏览器会先解析变量调用字体，再加载字体声明，自然不会生效。

3. 校验字体文件路径 #

• 路径是相对于编译后输出的css文件的路径，而非scss源文件的路径。你可以打开浏览器控制台的网络面板，查看woff2文件请求是否返回404，如果是404直接调整路径即可，也可以在Gulp的sass配置中添加includePaths参数简化路径引用。
• 如果你用了gulp-rev、gulp-clean-css这类资源处理插件，确认插件没有误改静态资源路径，或者已经配置了正确的资源映射规则。

4. 确认Gulp静态资源配置 #

检查gulpfile中是否配置了静态资源复制任务：woff2属于静态资源，需要配置任务将源文件中的字体文件复制到构建输出目录的对应路径下，否则构建后的dist目录中不存在字体文件，必然加载失败。参考配置如下：

// gulpfile.js示例
function copyAssets() {
  return src('src/assets/**/*.{woff2,woff,ttf}')
    .pipe(dest('dist/assets/'))
}

完成上述配置后刷新页面即可看到字体生效。

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