译者：zjruan 日期：2017-07-06
From the blog:
renovate - Keep npm dependencies up-to-date - Interview with Rhys Arkins
Register for Augsburg workshop (early July)
Register for Vienna clinics (late July)
加载字体和加载图片差不多，不过它会带来一些特殊的挑战。怎样知道要支持什么字体格式？如果你想完美的支持所有浏览器，那么你需要考虑4种字体格式。
这个问题可以通过决定一套应该接收一流服务的浏览器和平台来解决。区域的可以用系统字体。
通过 Webpack，你可以用好几种方式解决这个问题。 你仍然可以像图像一样使用 url-loader 和 file-loader 。 字体测试模式往往比较复杂，但你必须考虑字体文件相关的查找。
✪ 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.
选择一种格式
如果你排除Opera Mini，那么所有浏览器都支持.woff格式。 新版本.woff2 也已经被现代浏览器广泛支持，不失为一个很好的选择。
使用一种格式，你可以使用与图像类似的设置，并且在使用限制选项时依赖 file-loader 和 url-loader：
{
test: /\.woff$/,
loader: 'url-loader',
options: {
limit: 50000,
},
},
一个更复杂的方法来实现类似的结果，包含 .woff2 和其他字体，将最终得到如下代码：
{
// Match woff2 in addition to patterns like .woff?v=1.1.1.
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
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]',
},
},
支持多种格式
如果你想确保网站在最大数量的浏览器上看起来不错，你可以使用 file-loader 并忘记内联。另外，这是一个权衡，因为你得到额外的要求，但也许这是正确的举动。 现在你可以用一个加载器配置结束：
{
test: /\.(ttf|eot|woff|woff2)$/,
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');
/* Add other formats as you see fit */
}
✪ MDN discusses the font-family rule in detail.
操作 file-loader 输出路径和 publicPath
如上所述和在 webpack issue tracker中，* file-loader *允许整形输出。 这样，你就可以在根路径下，将字体放入fonts/，图片放入images/。
此外，可以操作publicPath并覆盖加载器的默认定义。 以下示例说明了这些技术：
{
// Match woff2 in addition to patterns like .woff?v=1.1.1.
test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 50000,
mimetype: 'application/font-woff',
// Output below the fonts directory
name: './fonts/[name].[ext]',
// Tweak publicPath to fix CSS lookups to take
// the directory into account.
publicPath: '../',
},
},
基于SVG生成字体文件
如果您喜欢使用基于SVG的字体，则可以使用webfonts-loader将其捆绑为单个字体文件
▼ Take care with SVGs 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.
Using Font Awesome
上述想法可以应用于Font Awesome。 它是一个允许你使用CSS类引用的高质量字体图标的集合。
项目中集成Font Awesome字体
要将Font Awesome集成到 book project，先安装：
npm install font-awesome --save
Given Font Awesome没有在它的* package.json *文件中定义main字段，你需要通过一个直接的路径而不是一个包名来指向它。
参考Font Awesome如下：
app/index.js
import 'font-awesome/css/font-awesome.css';
...
Font Awesome也包括Sass和Less版本，但在你还没配置的情况下，这个定义就足够了。
✪ The
importcould be cleaned up asimport 'font-awesome'by setting up aresolve.alias. The Package Consuming Techniques chapter discusses this idea in detail.
如果你现在运行项目 (npm start)，webpack 将会给你一个大大的错误列表：
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: .../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:479-532
@ ./~/font-awesome/css/font-awesome.css
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server react-hot-loader/patch ./app
实现 Webpack 配置
结果不出所料，因为你没有为任何Font Awesome字体配置加载程序，并且webpack不知道如何处理相关文件。 要匹配文件并通过 file-loader 映射，请将下列代码段附加到项目中：
webpack.parts.js
exports.loadFonts = ({ include, exclude, options } = {}) => ({
module: {
rules: [
{
// Capture eot, ttf, woff, and woff2
test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
include,
exclude,
use: {
loader: 'file-loader',
options,
},
},
],
},
});
与加载图像想法一样。 此时此刻你会匹配字体文件。 如果你愿意，你还可以将公共的部分重构成一个功能，在多个地共享。
你需要接着上面的主配置：
webpack.config.js
const commonConfig = merge([
...
parts.loadFonts({
options: {
name: '[name].[ext]',
},
}),
]);
该项目现在应该运行起来了（npm start），并且不报任何错误。
查看Font Awesome的操作，按照如下所示调整应用程序：
app/component.js
export default (text = 'Hello world') => {
const element = document.createElement('div');
// element.className = 'pure-button';
element.className = 'fa fa-hand-spock-o fa-1g';
element.innerHTML = text;
return element;
}
如果你构建这个应用（npm run build），你应该可以看到它被处理且 Font Awesome 资源被包含进来。
Hash: e379b2c5a9f46663f367
Version: webpack 2.2.1
Time: 2547ms
Asset Size Chunks Chunk Names
...font.eot 166 kB [emitted]
...font.ttf 166 kB [emitted]
...font.woff2 77.2 kB [emitted]
...font.woff 98 kB [emitted]
...font.svg 444 kB [emitted] [big]
logo.png 77 kB [emitted]
app.js 4.22 kB 0 [emitted] app
app.css 7.72 kB 0 [emitted] app
index.html 227 bytes [emitted]
[0] ./app/component.js 185 bytes {0} [built]
[1] ./~/font-awesome/css/font-awesome.css 41 bytes {0} [built]
[2] ./app/main.css 41 bytes {0} [built]
...
Font Awesome中包含的SVG文件已被标记为 [big]。 它超出了webpack默认设置的性能预算，该主题将在Minifying 章节中详细讨论。
✪ font-awesome-loader allows more customization. Font Awesome 5 improves the situation further and make it easier to decide what fonts to consume. Font Awesome wiki points to available online services that allow you to select specific fonts from Font Awesome collection.
结论
加载字体与加载其他资源类似。你必须考虑你想要支持的浏览器，基于它来选择你的加载策略。
回顾：
- 加载字体时，与加载图片技术相同。 您可以选择内联小字体，而较大的字体作为分离的资源。
- 如果您决定仅为现代浏览器提供一流的支持，您只能选择一种或两种字体格式，并让较旧的浏览器使用系统级字体。
- 使用较大的字体集合时（例如Font Awesome），可能会有问题，特别是要避免加载其他规则。 问题取决于问题的packages，并且可以在一定程度上用webpack解决。
