Vue项目引入自定义字体

1. 问设计先要到字体文件（woff2|eot|ttf|otf）

因为项目对浏览器支持性要求不高，所以笔者只用了ttf文件（仅以苹方字体举例），一般情况ttf和woff就够用
注： 如果要求支持Opera浏览器，就洗脑产品吧，让他放弃
字体文件的支持性可以去查Can i use

2. 开始进行配置

项目使用vue cli搭建，所以是修改 vue.config.js 文件

module.exports = {
	chainWebpack: (config) => {
		……
		config.module
	      .rule("fonts")
	      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
	      .use("url-loader")
	      .loader("url-loader")
	      .options({
	          limit: 4096,
	          fallback: {
	              loader: "file-loader",
	              options: {
	                  name: `/assets/fonts/[name].[ext]`
	              }
	          }
	      })
		……
	}
}

在项目 src/assets/fonts 文件夹下创建 font.less（项目使用的less，视具体情况创建文件）
在同文件夹下，放入 PingFang Medium.ttf
注：文件名注意下，包括空格啥的。别问，问就是我踩了坑

@font-face {
  font-family: 'PingFang-RE';
  src: url('./PingFang\ Medium.ttf');
  font-weight: normal;
  font-style: normal;
}

修改全局 css 的 font-family

@import './assets/fonts/font.less';
#app {
	font-family: 'PingFang-RE';
	font-display: swap;
}

这里需要注意一个小的优化点，一般情况下系统会在未下载完自定义字体的情况下先隐藏页面文本。
以前的方法是使用js脚本判断字体文件下载完成以后再添加css进行字体替换。

但是现在，有了 font-display 这个css属性，就可以达到我们的预期。
这里面用到的 swap 主要是为了能在自定义字体下载前先使用系统默认字体展示我们的页面，等自定义字体下载完成再替换。

具体关于 font-display 可以参考 字体预加载