如何限制Webpack使用的字体格式/Bootstrap？

Question

使用 React 16、Bootstrap 3、Webpack 2 和 Typescript 2.3。

默认情况下 Bootstrap 包括 WOFF、WOFF2、EOT、TTF 和 SVG 字体格式 Glyphicons-Halflings 字体系列。

我很高兴只支持 WOFF 字体格式 - 或者至少，我绝对不想处理 EOT 因为我不支持 IE8，而且 SVG 和 TTF 大得令人讨厌。

将字体嵌入到我的 javascript 可交付成果中是通过此 webpack 配置完成的：

module: {
  rules: [
    {test: /\.(tsx|ts)$/, loader: "awesome-typescript-loader"},
    {test: /\.css$/, use: ['style-loader', 'css-loader']},
    {test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
      loader: 'url-loader?limit=10240',
      options: { name: '[path][name].[ext]'},
    },
    {test: /\.js$/, enforce: "pre", loader: "source-map-loader"},
  ]
},

I'm actually not sure about how that url-loader config works. I was originally just trying to get the font files to be processed without mangling their names with the content hash. But instead Webpack inlined them into the javascript file and I decided I liked that much better - especially if I can get the size down by stripping the other font formats.

起初，我以为我可以省略 url-loader 配置中的字体格式，例如：

    {test: /\.(png|woff)$/, 
      loader: 'url-loader?limit=10240',
      options: { name: '[path][name].[ext]'},
    },

但是失败并出现以下错误：

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: ....\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.eot Unexpected character 'ï¿½' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4445-4497 6:4520-4572
 @ ./~/bootstrap/dist/css/bootstrap.css
 @ ./src/main/ts/AppReactRoot.tsx

所以我想也许我可以覆盖 app.css 文件中的 bootstrap 字体，只指定一种字体格式，例如：

@font-face {
  font-family: "Glyphicons Halflings";
  src: url("~bootstrap/dist/css/bootstrap.css") format('woff');
  font-weight: normal;
}

但这似乎没有什么区别。 app.css 文件，如果它有所不同，看起来像这样：

import * as React from "react";
import * as ReactDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.css"; 
import './app.css';

import {UserApp} from "app/UserApp";

ReactDOM.render(
  <UserApp/>,
  document.getElementById("root")
);

所以，问题是：如何覆盖 Bootstrap 默认值，以便我只使用 WOFF 字体格式？

Answer 1

这是我想出的。

添加仅包含您希望支持的格式的自定义字体，并告诉 bootstrap 使用该字体：

@font-face {
  font-family: "Glyphicons Custom";
  src: url('~bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff');
  font-weight: normal;
}

.glyphicon {
  font-family: 'Glyphicons Custom';
}

然后通过为不需要的格式添加 emitFiles=false 加载器规则，从 webpack 配置中排除不需要的字体格式。我的 webpack 模块规则现在看起来像：

module: {
  rules: [
    {test: /\.(tsx|ts)$/, loader: "awesome-typescript-loader"},
    {test: /\.css$/, use: ['style-loader', 'css-loader']},
    // small PNGs (< limit bytes) will be inlined into the js
    // larger will be dumped into assets/appVersion
    { test: /\.(png)$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: '[name].[ext]',
        publicPath: publicAssetPath,
      },
    },
    /* This embeds WOFF format fonts (including haflings) regardless of
    size.  Embedding to get rid of "Flash of Invisible Text" issue with
    glyphicons.
    */
    { test: /\.woff$/, loader: 'url-loader'},
    // filter out glyphicons font formats we don't care about
    { test: /bootstrap.dist.fonts.glyphicons-halflings-regular\.(woff|eot|svg|ttf|woff2)$/,
      loader: 'file-loader?emitFile=false'
    },
    {test: /\.js$/, enforce: "pre", loader: "source-map-loader"},
  ]
},

请注意，您的 javascript 中现在将有第二个小 font-woff 数据 url，其中包含代码 module.exports = __webpack_public_path__ + "fa2772327f55d8198301fdb8bcfc8158.woff"; 不确定为什么会发出那样的信号。

原始问题中 url-loader 代码的问题是您不能在 loader 属性 中同时使用两个 url 参数和 options 属性。我的 limit 设置被忽略了，url-loader 似乎认为这意味着它应该嵌入所有内容。

如何限制Webpack使用的字体格式/Bootstrap？

How can I restrict the font format used by Webpack / Bootstrap?

webfonts

twitter-bootstrap

twitter-bootstrap-3

webpack