Loading Fonts(加载字体)

Loading fonts is similar to loading images. It does come with unique challenges, though. How to know what font formats to support? There can be up to four font formats to worry about if you want to provide first class support to each browser.<br/>
加载字体与加载图片类似。但是它也伴随着独特的挑战。如何知道什么字体是被支持的？如果你想对每种浏览器都提供一流的支持，那至少需要考虑四种字体格式。

The problem can be solved by deciding a set of browsers and platforms that should receive first class service. The rest can use system fonts.<br/>
决定对哪些浏览器和平台需要提供一流的服务就能够解决这个问题。其他浏览器和平台就使用系统字体。

You can approach the problem in several ways through webpack. You can still use url-loader and file-loader as with images. Font test patterns tend to be more complicated, though, and you have to worry about font file related lookups.<br/>
你可以通过Webpack用不同的方式解决这个问题。像处理图片一样，继续使用 url-loader 和 file-loader, 但是字体的 test 会变得更复杂一些，并且需要考虑字体文件相关的查询。

T> canifont helps you to figure out which font formats you should support. It accepts a .browserslistrc definition and then checks font support of each browser based on the definition.<br/>
T> canifont 赞助你解决应该支持哪种字体格式。 它接收一个 .browserslistrc 定义，然后基于这个定义检查每个浏览器对字体的支持。

Choosing One Format(选择一个格式)

If you exclude Opera Mini, all browsers support the .woff format. Its newer version, .woff2, is widely supported by modern browsers and can be a good alternative.

如果你排除了Opera Mini, 所有的浏览器在支持 .woff 格式. 它的新版本 .woff2 被现代浏览器广泛支持，也是一个不错的选择。

{pagebreak}

Going with one format, you can use a similar setup as for images and rely on both file-loader and url-loader while using the limit option:

选定一种格式，你可以使用和图片类似的配置并在使用limit选项时依赖于 file-loader 和 url-loader：

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

A more elaborate approach to achieve a similar result that includes .woff2 and others would be to end up with the code as below:<br/>
要想用精妙地方法来获得类似结果来包含 .woff2 和其他配置，下面的代码给出了解决方法：

{
  // Match woff2 in addition to patterns like .woff?v=1.1.1.
  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
  use: {
    loader: "url-loader",
    options: {
      // Limit at 50k. Above that it emits separate files
      limit: 50000,

      // url-loader sets mimetype if it's passed.
      // Without this it derives it from the file extension
      mimetype: "application/font-woff",

      // Output below fonts directory
      name: "./fonts/[name].[ext]",
    }
  },
},

{pagebreak}

Supporting Multiple Formats(支持多种类型)

In case you want to make sure the site looks good on a maximum amount of browsers, you can use file-loader and forget about inlining. Again, it's a trade-off as you get extra requests, but perhaps it's the right move. Here you could end up with a loader configuration:<br/>
为了确保在最大数量的浏览器中让站点更好地显示，可以使用 file-loader 而不考虑使用内联嵌入。重申一次，这会导致增加额外的请求，但或许这是正确之举。下面以一个加载器的配置代码结束：

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

The way you write your CSS definition matters. To make sure you are getting the benefit from the newer formats, they should become first in the definition. This way the browser picks them up.<br/>
编写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");
    /* Add other formats as you see fit */
}

T> MDN discusses the font-family rule in detail.
详情参见：MDN discusses the font-family rule。

{pagebreak}

Manipulating file-loader Output Path and publicPath(控制 file-loader 的输出路径和 publicPath)

As discussed above and in webpack issue tracker, file-loader allows shaping the output. This way you can output your fonts below fonts/, images below images/, and so on over using the root.

如上面所讨论的以及webpack issue tracker, file-loader 允许设置输出。通过这种方式，您可以在“字体/”下面输出字体，在“图像/”下面输出图像，等等。

Furthermore, it's possible to manipulate publicPath and override the default per loader definition. The following example illustrates these techniques together:
更进一步，它可以操纵 publicPath 并覆盖每个加载器的默认值。下面的例子一起说明了这些技术：

{
  // Match woff2 and patterns like .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]", // Output below ./fonts
      publicPath: "../", // Take the directory into account
    },
  },
},

Generating Font Files Based on SVGs(基于SVG文件生成字体文件)

If you prefer to use SVG based fonts, they can be bundled as a single font file by using webfonts-loader.<br/>
如果你喜欢使用基于SVG的字体，它们可以用 webfonts-loader 打包成一个字体文件.

W> Take care with SVG images if you have SVG specific image setup in place already. If you want to process font SVGs differently, set their definitions carefully. The Loader Definitions chapter covers alternatives.

如果已经设置了SVG图片，对这些SVG图片需要倍加小心。如果想用不同的方式处理字体SVG文件，需要小心设置他们的定义。 Loader Definitions 一节包含了替代方案。

Using Google Fonts(使用谷歌字体)

google-fonts-webpack-plugin can download Google Fonts to webpack build directory or connect to them using a CDN.

google-fonts-webpack-plugin 能够下载Google字体到Webpack的构建目录或者将他们连接到一个CDN。

Using Icon Fonts(使用图标字体)

iconfont-webpack-plugin was designed to simplify loading icon based fonts. It inlines SVG references within CSS files.
iconfont-webpack-plugin 被设计用来简化加载基于图片的字体的。它在CSS文件中内联SVG引用。

Conclusion(总结)

Loading fonts is similar to loading other assets. You have to consider the browsers you want to support and choose the loading strategy based on that.

加载字体与加载其他资源类似。你不得不考虑想要支持的浏览器并基于此选择加载策略。

To recap(概要):

• When loading fonts, the same techniques as for images apply. You can choose to inline small fonts while bigger ones are served as separate assets.
• 加载字体与加载图片使用相同的技术。你可以选择内联小的字体文件，并将大的字体文件生成独立资源。
• If you decide to provide first class support to only modern browsers, you can select only a font format or two and let the older browsers to use system level fonts.
• 如果决定只对现代浏览器进行一流的支持，你可以只选择一到两种字体格式，并让传统浏览器使用系统级字体。

In the next chapter, you'll learn to load JavaScript using Babel and webpack. Webpack loads JavaScript by default, but there's more to the topic as you have to consider what browsers you want to support.