加载字体文件与加载图片类似，但也要做一些特殊处理。不同的浏览器对各种字体格式的支持不同。如果想要在各个浏览器上都有一个好的展示效果的话，通常需要考虑四种字体格式，老旧浏览器可以考虑使用系统默认字体。

在 Webpack 中，我们依然依靠 loader 的 type 字段来配置。从 Can I Useopen in new window 网站上可以查到，除了 Opera mini 以外，其他浏览器都支持 .woff 格式，同时 .woff2 也被大部分现代浏览器支持。

如果只用一种字体格式的话，可以配置如下：

const config = {
  test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/, // 匹配 .woff?v=1.1.1.
  use: {
    type: 'asset',
    parser: { dataUrlCondition: { maxSize: 50000 } },
  },
};

如果需要在所有浏览器上都有一个好的显示效果，那么可以使用 type: "asset/resource"，放弃内联字体文件。

const config = {
  test: /\.(ttf|eot|woff|woff2)$/,
  type: 'asset/resource',
};

之后，我们需要在样式文件中定义字体，为了能优先使用新的字体格式，我们需要把定义放在前面。

@font-face {
  font-family: 'Demo Font';
  src: url('./fonts/df.woff2') format('woff2'), url('./fonts/df.woff') format('woff'),
    url('./fonts/df.eot') format('embedded-opentype'), url('./fonts/df.ttf')
      format('truetype');
}

使用 Icon Fonts

iconfont-webpack-pluginopen in new window 这个插件可以用来加载 icon font 字体，它会将 svg 内联在 css 样式中。

fontmin-webpackopen in new window 可以帮助我们删除未被使用的字体。

修改 file-loader 的 output 路径和 publicPath

可以通过 file-loader 和 url-loader 来更好的控制字体的输出。我们设置可以每个 loader 都定义不同的 publicPath。

{
  // 匹配 woff2 以及类似于 .woff?v=1.1.1 的模式
  test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 50000,
      mimetype: "application/font-woff",
      name: "./fonts/[name].[ext]", // 输出在 ./fonts 目录下
      publicPath: "../", // 把模块目录也考虑到最终输出目录中去
    },
  },
},

在上面的例子中，file-loader 是被默认引用的，在 limit 中会启用 file-loader。

删除未用的符号来较少字体大小

subfontopen in new window 可以静态分析输出的 html 中的文字，然后仅仅将被使用的字体符号写入到字体文件中。这样可以显著减小字体文件的大小。

结论

加载字体文件与加载图片类似，我们要做的是根据要支持的浏览器来选择不同的加载策略。

我们可以选择将体积较小的字体文件内联在样式文件中，将较大的字体文件单独输出为一个文件。

不同浏览器对字体格式的支持不同，我们可以选中一两种字体格式，然后老旧浏览器使用系统默认字体。

关注微信公众号，获取最新推送~

加微信，深入交流~