加载字体

加载字体与加载图像类似,但它确实带来了独特的挑战。如何知道浏览器支持哪种字体格式?如果要为每个浏览器都提供字体支持,我们要关心四种字体格式。

我们可以为一组特定的浏览器和平台提供字体支持来解决这个问题,其余的可以使用系统字体。

在 Webpack 中您可以通过多种方式解决这个问题。您仍然可以像处理图像一样使用 url-loaderfile-loader。但是,字体的 test 字段设置往往更复杂,您必须要关心如何查找相关的字体文件。

canifont 可以帮助您找出应该支持的字体格式。它接受 .browserslistrc 定义,然后根据定义检查每个浏览器的对字体格式的支持情况。

选择一种字体格式

如果排除 Opera Mini,则所有浏览器都支持 .woff 格式。它的新版本 .woff2 得到了现代浏览器的广泛支持,可以作为一个很好的选择。

在选择格式时,和图片配置一样,您可以依赖 file-loaderurl-loader 并设置 limit 选项:

{
  test: /\.woff$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 50000,
    },
  },
},

还可以设置一个更精细的规则来实现类似的结果,匹配了以 .woff2 和一些特定结尾的字体文件:

{
  // 除了 .woff?v=1.1.1 这样的格式以外,还要匹配 woff2.
  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
  use: {
    loader: "url-loader",
    options: {
      // 限制为 50k. 超过它就生成独立的文件
      limit: 50000,

      // 设置 mimetype
      // 如果没有这一项,默认会根据文件扩展名来获取
      mimetype: "application/font-woff",

      // 输出字体到文件夹
      name: "./fonts/[name].[ext]",
    }
  },
},

支持多种格式

如果您想确保网站在绝大多数的浏览器上看起来很好,您可以使用 _file-loader_而不是内联。再次,这是一个权衡,因为你得发出额外的请求,但也许这是正确的举措。这里是一个 loader 配置:

{
  test: /\.(ttf|eot|woff|woff2)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "fonts/[name].[ext]",
    },
  },
},

编写 CSS 规则的方式很重要,为了确保您从较新的格式中获益,它们应该成为定义中的第一个。这样浏览器就可以优先使用它们。

@font-face {
  font-family: "myfontfamily";
  src: url("./fonts/myfontfile.woff2") format("woff2"),
    url("./fonts/myfontfile.woff") format("woff"),
    url("./fonts/myfontfile.eot") format("embedded-opentype"),
    url("./fonts/myfontfile.ttf") format("truetype");
    /* 还可以添加你认为合适的其他格式 */
}

MDN详细讨论了 font-family 规则

操作 file-loader 输出路径和 publicPath

webpack 问题跟踪 和上面所谈到的那样,file-loader 允许对输出进行调整。这样,您可以把字体文件输出到 fonts/ 下,把图像输出到images/ 下,甚至可以把它们放到根路径下。

此外,我们还可以操作 publicPath,覆盖每个 loader 的默认定义。下面的例子展示了如何将这些技术结合在一起:

{
  // 除了 .woff?v=1.1.1 这样的格式以外,还要匹配 woff2.
  test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 50000,
      mimetype: "application/font-woff",
      name: "./fonts/[name].[ext]", // 输出到 ./fonts
      publicPath: "../", // 输出时基于这个目录
    },
  },
},

基于 SVG 生成字体文件

如果您更喜欢基于 SVG 的字体,可以使用 webfonts-loader 将它们打包为单个字体文件。

如果已经您已经针对 SVG 图片做了特殊的配置,又要以不同方式来处理 SVG 字体,您需要小心配置。使用 loader 一章有一些相关内容。

使用 Google 字体

google-fonts-webpack-plugin 可以将 Google 字体下载到 Webpack 构建目录或使用 CDN 连接到它们。

使用字体图标

iconfont-webpack-plugin 旨在简化加载字体图标。它在 CSS 文件中的通过内联的方式引用 SVG。

总结

加载字体与加载其他资源类似。您必须考虑要支持的浏览器,并据此确定加载策略。

回顾一下:

  • 加载字体时,应用与图像相同的技术。您可以选择内联小字体,而较大字体则作为单独资源。
  • 如果您决定仅为现代浏览器提供一流支持,则只能选择一种或两种字体格式,并让旧版浏览器使用系统级字体。

在下一章中,您将学习使用 Babel 和 webpack 加载 JavaScript。默认情况下,Webpack 本身可以加载 JavaScript,但由于您必须考虑要浏览器兼容性,因此这个主题包含了许多这方面的内容。

用户头像
登录后发表评论