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

在 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 } },
  },
};
1
2
3
4
5
6
7

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

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

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

@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');
}
1
2
3
4
5
6

使用 Icon Fonts

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

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

修改 file-loader 的 output 路径和 publicPath

可以通过 file-loaderurl-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: "../", // 把模块目录也考虑到最终输出目录中去
    },
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

结论

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

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

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

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