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

使用React 16，Bootstrap 3，Webpack 2和Typescript 2.3。如何限制Webpack/Bootstrap使用的字体格式？

默认情况下，引导包括WOFF，WOFF2，EOT，TTF和SVG字体格式为Glyphicons-Halflings FONT-FAMILY。

我很高兴只支持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"}, 
    ] 
},

实际上，我不知道怎么说网址装载机配置工程。我最初只是试图让字体文件被处理，而不会用内容哈希来改变他们的名字。但是相反，Webpack将它们嵌入到JavaScript文件中，我决定更喜欢它 - 特别是如果我可以通过剥离其他字体格式来缩小尺寸。

起初，我想我可能只是省略了字体格式从网址加载器的配置，如：

{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文件中的引导字体，并且只指定单个字体格式，例如：

@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") 
);

所以，问题是：我怎样才能让我只使用了WOFF字体格式重写引导默认值？

来源

2017-10-06 Shorn

这是我想出来的。

添加自定义字体，只有你想支持的格式，并告诉引导到改用：

@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财产和的options财产使用这两个网址参数。我的limit设置被忽略，url-loader似乎认为它应该嵌入一切。

来源

2017-10-07 05:30:01 Shorn

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

回答

相关问题