07_03_加載字體（Webpack Book）

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.