使用PostCSS无法加载字体的技术问题求助

我来帮你排查下PostCSS加载字体失败的问题，大概率是路径配置、资源处理插件没到位，或者格式写法有小问题，咱们一步步来解决：

1. 先修正@font-face的格式写法 #

你当前的format('ttf')不是标准写法，浏览器认可的TrueType字体格式值是truetype，先把CSS代码调整一下：

@font-face {
  font-family: Boxley;
  src: url('./fonts/Boxley.ttf') format('truetype');
  /* 可选：添加font-display优化字体加载体验 */
  font-display: swap;
}
@font-face {
  font-family: Boxley-Bold;
  src: url('./fonts/Boxley-Bold.ttf') format('truetype');
  font-display: swap;
}

2. 确认相对路径是否正确 #

根据你提到的目录结构（src目录下存放fonts文件夹），得先明确你的CSS文件和fonts文件夹的相对位置：

• 如果CSS文件直接在src/目录下：./fonts/Boxley.ttf是正确路径
• 如果CSS文件在src/css/这类子文件夹里：路径要改成../fonts/Boxley.ttf（先回到src目录，再找到fonts文件夹）

举个常见的目录结构例子：

src/
├── fonts/
│   ├── Boxley.ttf
│   └── Boxley-Bold.ttf
└── styles/
    └── main.css

那main.css里的字体路径就得写成../fonts/Boxley.ttf

3. 配置PostCSS资源处理插件 #

PostCSS本身不会自动处理字体文件的复制和路径转换，需要用到postcss-url插件来完成这件事：

第一步：安装插件 #

npm install postcss-url --save-dev

第二步：修改postcss.config.js #

把插件加入配置，指定字体文件的复制路径：

module.exports = {
  plugins: [
    require('precss'),
    require("css-mqpacker"),
    require("postcss-cssnext"),
    // 添加postcss-url配置
    require('postcss-url')({
      url: 'copy', // 复制字体文件到构建输出目录
      assetsPath: '../fonts', // 对应输出目录中字体的存放位置，根据你的构建结构调整
      useHash: false // 不需要缓存哈希的话保持false，需要优化缓存可以设为true
    }),
    require("cssnano"),
    // 其他你用到的插件...
  ]
}

4. 配合构建工具的资源处理（如果用Webpack/Parcel等） #

如果你用Webpack这类构建工具，还需要配置loader来处理字体文件：

安装file-loader #

npm install file-loader --save-dev

在webpack.config.js中添加规则 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]', // 保留字体原文件名
            outputPath: 'fonts/', // 字体输出到dist/fonts目录
            publicPath: '../fonts/' // CSS中引用字体的相对路径
          }
        }
      },
      // 其他规则（比如CSS、JS的处理）...
    ]
  }
}

做完这些配置后，重新运行构建，应该就能正常加载字体了。如果还是有问题，可以检查下输出目录里是否有复制过去的字体文件，以及CSS最终生成的引用路径是否正确。

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