Webpack无法加载TTF字体：React项目字体引入问题求助

我帮你梳理下解决思路，一步步搞定Webpack加载字体的问题：

1. 先给Webpack配置字体处理规则 #

Webpack默认不会识别TTF这类字体文件，必须在配置里添加对应的处理规则，分两种版本情况：

如果你用Webpack 5+（现在大部分项目都是这个版本） #

Webpack5自带了Asset Modules，不用额外装loader，直接在webpack.config.js里加这段：

module.exports = {
  // ...其他已有配置
  module: {
    rules: [
      // ...保留你已有的CSS/SCSS处理规则
      {
        test: /\.(ttf|woff|woff2|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]' // 字体打包后会放到dist/fonts目录下，可自定义
        }
      }
    ]
  }
};

如果你用Webpack 4及更早版本 #

得先装file-loader：

npm install file-loader --save-dev
# 或者用yarn：yarn add file-loader -D

然后在配置里添加规则：

module.exports = {
  // ...其他已有配置
  module: {
    rules: [
      // ...保留你已有的CSS/SCSS处理规则
      {
        test: /\.(ttf|woff|woff2|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name][ext]',
              publicPath: '../' // 根据你的CSS输出路径调整，确保字体引用路径正确
            }
          }
        ]
      }
    ]
  }
};

2. 补全并校验@font-face配置 #

先把你没写完的粗体规则补全，同时确认路径和权重值对应正确：

@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 400; // 常规体对应400
  src: url("../../fonts/A.ttf") format("truetype");
}
@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 300; // 轻量体一般对应300，和字体文件匹配
  src: url("../../fonts/A-light.ttf") format("truetype");
}
@font-face {
  font-family: "A";
  font-style: normal;
  font-weight: 700; // 粗体对应700，800是特粗体，根据你的字体实际情况调整
  src: url("../../fonts/A-bold.ttf") format("truetype");
}

注意：路径从__base.scss出发，../../fonts/A.ttf是正确的（从src/styles/base往上两级到src，再进入fonts目录），别写错文件名大小写哦。

3. 确保样式被正确导入到项目 #

• 先在styles.scss里引入基础样式：

// styles.scss
@import './base/__base.scss';
// ...其他全局样式

• 然后在入口文件app.jsx里导入全局样式：

// app.jsx
import './styles/styles.scss';
// ...你的组件代码

4. 测试字体是否生效 #

在组件里加个测试代码验证：

function App() {
  return (
    <div className="font-test">
      <p style={{ fontFamily: 'A', fontWeight: 400 }}>这是常规体A</p>
      <p style={{ fontFamily: 'A', fontWeight: 300 }}>这是轻量体A</p>
      <p style={{ fontFamily: 'A', fontWeight: 700 }}>这是粗体A</p>
    </div>
  );
}
export default App;

额外排查点 #

• 看浏览器控制台的Network面板，检查字体文件有没有404错误，有错误就调整路径
• 清理Webpack缓存：删掉dist目录或者node_modules/.cache，重新构建
• 确认字体文件本身没问题，比如能不能在本地打开

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