webpack4系列教程，如何配置使用字体文件?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

webpack系列教程，如何配置使用字体文件? 网页上的字体文件，在国内，一般来说是图标字体iconfont。当然了，在国外，也会有大量的谷歌字体存在。而且，这些谷歌字体都是以url形式存在的，这并不是本文讨论的内容。本文中，苏南大叔讨论的是：以文件形式存在的普通字体，即：eot、woff、woff2、ttf、svg这些文件。

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、url-loader@4.1.0。特约出镜的是：阿里矢量图标库iconfont.cn。

矢量图标字体

因为要研究webpack如何处理字体文件，所以，这里苏南大叔，选用了阿里矢量图标库。链接见下方：

• https://www.iconfont.cn/

然后选取了一款名为"采浊工"的字体，下载到本地待用。

• https://www.iconfont.cn/collections/detail?cid=22859

然后，就有了本文中的目标文件，如下图所示：

这里，还是使用url-loader这个万能的loader，来做字体文件的处理。不过，在本文中，苏南大叔想展示两种配置方法。作为对url-loader的选项的进一步理解。两个配置，效果一致。但是，各有千秋。大家可以自行斟酌。

配置文件一

module.exports = {
    //...
    module: {
        rules: [
            //...
            {
                test: /\.(eot|woff|woff2?|ttf|svg)$/,
                use: [
                  {
                    loader: "url-loader",
                    options: {
                      name: "fonts/[name]-[hash:5].[ext]",
                      limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                    }
                  }
                ]
            }
        ]
    }
}

配置文件二

module.exports = {
    //...
    module: {
        rules: [
            //...
            {
                test: /\.(eot|woff|woff2?|ttf|svg)$/,
                use: [
                  {
                    loader: "url-loader",
                    options: {
                      name: "[name]-[hash:5].[ext]",
                      limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                      publicPath: "../fonts/",
                      outputPath: "fonts/"
                    }
                  }
                ]
            }
        ]
    }
}

两个配置的区别

区别还是在于目标路径fonts目录，到底写在哪里。

• 第一种写法，把path写在name里面。这种情况下，在苏南大叔的实验中，无需配置publicPath和outputPath。路径是自动修正的。
• 第二种写法，把path不写到name里面，分别设置到publicPath和outputPath，这种情况下，outputPath是负责告诉webpack，文件输出的位置。而publicPath是设置，在页面代码中，如何找到相应的字体文件。

测试代码

index.html：

<span class="iconfont">&#xe626;</span>

iconfont.css:

@font-face {
    font-family: 'iconfont';
    src: url('iconfont/iconfont.eot');
    src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont/iconfont.woff2') format('woff2'),
        url('iconfont/iconfont.woff') format('woff'),
        url('iconfont/iconfont.ttf') format('truetype'),
        url('iconfont/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main.js里面引入iconfont.css，传统方式引用的话，字体是不会被正常处理的哦~

import "./iconfont.css";

测试结果：

可能存在的问题

在实际的部署过程中，可能会存在nginx不能识别svg字体的情况，可以参考下面的链接解决问题：

• https://newsn.net/say/nginx-apache-font.html

这里就举例更为常见的nginx的情况，参考配置：
mime.conf:

application/x-font-ttf                ttc ttf;
application/x-font-otf                otf;
application/font-woff                 woff;
application/font-woff2                woff2;
application/vnd.ms-fontobject         eot;
image/svg+xml                         svg svgz;

vhost.conf:

location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {
    add_header Access-Control-Allow-Origin *;
}

相关链接

• https://www.iconfont.cn/
• https://newsn.net/say/iconfont-list.html

总结

字体文件，作为网页成员的重要组成部分。在webpack中，就是这么被url-loader所处理的。好的，本文就说这么多，如果把本文中的字体文件，想象成css中的背景图片引用的话，其实，本文还是挺好理解的。

更多webpack的经验文字，请点击苏南大叔的博客：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。