Question

当构建过程看起来很好时，字体不会在浏览器上呈现。 Webpack正确地将字体文件移动到public/fonts目录。生成的css文件显示了字体文件的正确路径。

以下是加载器配置：

{
    test: /\.s?css$/,
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
},
{
    test: /\.(eot|svg|ttf|woff|woff2)/,
    loader: 'file?name=../fonts/[name].[ext]'
},
{
    test: /\.(png|jpg|gif)$/,
    loader: "url-loader?limit=100000"
}

这是构建输出：

                                     Asset     Size  Chunks             Chunk Names
                    ../fonts/icon_set_2.svg  20.9 kB          [emitted]
  ../fonts/glyphicons-halflings-regular.eot  20.1 kB          [emitted]
 ../fonts/glyphicons-halflings-regular.woff  23.4 kB          [emitted]
  ../fonts/glyphicons-halflings-regular.ttf  45.4 kB          [emitted]
  ../fonts/glyphicons-halflings-regular.svg   109 kB          [emitted]
                    ../fonts/icon_set_1.eot  71.6 kB          [emitted]
                   ../fonts/icon_set_1.woff  41.9 kB          [emitted]
                    ../fonts/icon_set_1.ttf  71.5 kB          [emitted]
                    ../fonts/icon_set_1.svg  98.5 kB          [emitted]
                    ../fonts/icon_set_2.eot  13.9 kB          [emitted]
                   ../fonts/icon_set_2.woff  7.85 kB          [emitted]
                    ../fonts/icon_set_2.ttf  13.7 kB          [emitted]
../fonts/glyphicons-halflings-regular.woff2    18 kB          [emitted]
                      ../fonts/fontello.eot   533 kB          [emitted]
                     ../fonts/fontello.woff   321 kB          [emitted]
                      ../fonts/fontello.ttf   532 kB          [emitted]
                      ../fonts/fontello.svg   826 kB          [emitted]
                      ../fonts/Glyphter.eot  7.22 kB          [emitted]
                     ../fonts/Glyphter.woff  5.02 kB          [emitted]
                      ../fonts/Glyphter.ttf  7.06 kB          [emitted]
                      ../fonts/Glyphter.svg  45.2 kB          [emitted]
                             main.bundle.js   1.2 MB       0  [emitted]  main
                           vendor.bundle.js  3.74 MB       1  [emitted]  vendor
                         main.bundle.js.map  1.72 MB       0  [emitted]  main
                       vendor.bundle.js.map  5.58 MB       1  [emitted]  vendor

这是来自浏览器正在接收的引导程序文件：

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url(/../fonts/glyphicons-halflings-regular.eot);
  src: url(/../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(/../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(/../fonts/glyphicons-halflings-regular.woff) format('woff'), url(/../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(/../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}

+ public
    + build
        main.bundle.js
        vendor.bundle.js
    + fonts
        glyphicons-halflings-regular.eot
        rest of font files...

但是当我尝试使用字体（字形）时，它们无法正确呈现。

Answer 1

我不知道为什么，但你不能使用字体的相对路径。我遇到了完全相同的问题，我的工作是将字体放在“build”目录下的文件夹中。所以你的目录结构如下所示：

+ public
    + build
        main.bundle.js
        vendor.bundle.js
        + fonts
            glyphicons-halflings-regular.eot
            rest of font files...

这是我的装载机的样子：

{
    test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]'
},
{
    test: /\.(ttf|eot|svg)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/,
    loader: 'file-loader?name=fonts/[name].[ext]'
},
{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},

另请注意，从Webpack 2.0开始，您应该为所有加载器使用* -loader版本，如我的示例所示。

希望有所帮助。

字体未在webpack构建中加载

1 个答案: