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

苏南大叔:webpack4系列教程,如何配置使用字体文件? - webpack-font
webpack4系列教程,如何配置使用字体文件? (图4-1)

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

矢量图标字体

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

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

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

苏南大叔:webpack4系列教程,如何配置使用字体文件? - iconfont-all
webpack4系列教程,如何配置使用字体文件? (图4-2)

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

苏南大叔:webpack4系列教程,如何配置使用字体文件? - webpack-config-font
webpack4系列教程,如何配置使用字体文件? (图4-3)

测试代码

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

测试结果:

苏南大叔:webpack4系列教程,如何配置使用字体文件? - iocnfont-demo
webpack4系列教程,如何配置使用字体文件? (图4-4)

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack    font

本站的忠实读者小伙伴,正在阅读下面这些文章: