1。如何在Vue或React项目中使用自定义字体在开发前端项目时，经常会遇到UI同事想在项目中使用炫酷的字体。那么如何在项目中使用自定义字体呢？其实实现起来并不复杂，使用CSS3@font-face就可以实现。本文重点介绍webpack项目如何正确打包导入的自定义字体。@font-face有什么用总结一下：借助这个规则，用户可以命名导入的字体包并指定在哪里可以找到它（指定字体包的存放路径），然后像这样使用通用字体继续使用它。具体实现步骤，比如目前的需求是：项目中需要使用KlavikaMedium-Italic字体。那么你只需要以下三个步骤。1、将字体包放入工程目录下，放在根目录下的tool/fonts文件夹中。2.在index.css文件中定义@font-face{font-family:'myFont';src:url(tool/fonts/KlavikaMedium-Italic.otf);}3.新建一个自定义字体的index.vue文件，导入样式：import'./index.css'Useacustomfont
效果如下：2.如何在webpack项目中正确打包自定义字体1.打包时报错Now那个效果在本地开发环境已经实现了，我用webpack打包准备上线，但是发现打包过程中webpack报错：2.为什么打包的时候报错？在定义自定义字体时，URL用于指定字体包的路径。由于webpack默认无法处理css中的url地址，所以这里会报错。3.解决错误3.1了解file-loader。这时候就需要使用loader来大显身手了。要解决这个问题，你需要使用文件加载器。主要做了两件事：根据配置修改打包好的图片和字体包的存放路径；然后根据配置修改我们引用的路径，使其对应导入。3.2安装file-loaderyarnaddfile-loader3.3配置file-loader在webpack.config.js中，配置file-loader:module.exports={module:{rules:[{//hitfontpackagetest:/.(woff2?|eot|ttf|otf)(?.*)?$/,//只命中指定目录下的文件，加快Webpack搜索速度include:[paths.toolSrc],//排除node_modules目录下的文件exclude:/(node_modules)/,loader:'file-loader',},]}}再次执行打包命令，没有报错。4、为什么自定义字体不生效？于是将打包好的dist目录重新部署到服务器，访问页面，发现字体没有生效，因为找不到字体：从图中可以看出，http请求字体包的路径就是：根目录（打包后的静态文件index.html所在目录）中的css/620db1b997cd78cd373003282ee4453f.otf。4.1字体不生效的原因我看了一下打包命令生成的dist目录结构：├──620db1b997cd78cd373003282ee4453f.otf├──css│├──backend.66a35.css│└──backend。66a35.css.map├──favicon.ico├──图片│├──bg.5825f.svg│├──data-baseTexture.c2963.jpg│├──data-heightTexture.6f50d.jpg│└──logo.7227a.png├──index.html└──js├──backend.66a35.js发现字体包和index.html在同一层。所以字体不能生效的原因就很明确了：因为http请求的字体包路径和实际存放路径不一致，导致404；找不到字体包的实际路径，所以使用的字体无法生效。4.2字体失效的解决方法可以通过修改字体包的实际存放路径来解决。在webpack.config.js中，可以继续通过options参数为file-loader设置更多的配置项：module.exports={module:{rules:[{//打字体包test:/.(woff2?|eot|ttf|otf)(?.*)?$/,//只命中指定目录下的文件，加快Webpack搜索速度include:[paths.toolSrc],//排除下的文件node_modules目录exclude:/(node_modules)/,loader:'file-loader',//添加options配置参数：file-loader的配置项options:{limit:10000,//定义最终导出的文件路径outputPath:'css/fonts/',//最后的文件名：'[name].[hash:7].[ext]'}},]}}再次打包，生成的dist目录结构如下：├──css│├──backend.66a35.css│├──backend.66a35.css.map│└──fonts│└──KlavikaMedium-Italic.620db1b.otf├──favicon.ico├──images│├──bg.5825f.svg│├──data-baseTexture.c2963.jpg│├──data-heightTexture.6f50d.jpg│└──logo.7227a.png├──index.html└──js├──backend.66a35.js在配置的时候可以看到字体包存放在css/fonts目录下。重新部署项目，再次查看：这次http请求的字体包路径与实际存放路径一致，所以自定义字体生效。通过下面的排序流程图可以看得更清楚：3.总结为什么本地开发能看到字体，部署到服务器后却看不到？由于webpack项目在本地开发使用webpack-dev-server，实时编译后的文件保存在内存中，引用字体包时使用绝对路径，所以本地开发使用的自定义字体可以生效；使用webpack打包的dist目录，字体包实际存放路径与http请求字体包路径不一致，导致找不到字体包；使用file-loader解决webpack打包报错，使用options参数将字体包设置在打包后的实际存放路径，从而解决问题。4.更多文章欢迎访问更多webpack系列原创文章：webpack系列基本概念及webpack系列loader的使用及webpack系列插件的简单使用及webpack项目的简单使用如何正确打包导入的自定义字体关注微信公众号欢迎大家关注我的微信公众号阅读更多原创文章：
