本文共 1592 字，大约阅读时间需要 5 分钟。

手机只会显示系统自带的默认字体，如果要展示特殊字体只能引入字体包，但是引入的字体包如果是中文汉字类（比如楷体、黑体等）加载速度会很慢，因为毕竟汉字有很多。

使用自定义字体

1. 引入所需的字体报，可以到git上找需要的字体包，但是貌似不是那么好找～～。
2. 新建一个css文件，在里面引入所需的字体包（src），然后定义好该字体的名字（font-family）。

@font-face {   font-family: 'Arial'; /*这里是说明调用来的字体名字*/   src: url('./Arial.ttf'); /*这里是字体文件路径*/ }@font-face {   font-family: 'Calibri';   src: url('./Calibri.ttf');}@font-face {   font-family: '楷体';   src: url('./Kaiti.ttf'); }@font-face {   font-family: '黑体-简';   src: url('./SimHei.ttf');  }@font-face {   font-family: '华文仿宋';  src: url('./STFangsong.ttf');  }

3. 在main.js中全局引入

import './assets/fonts/font.css'

4. 在需要使用特殊字体的地方使用即可

.echarts-title{          font-family: '华文仿宋';}

提高字体加载速度

使用Fontmin，比较好用，但是仅适用于文字不经常变动, 或者在一定范围内变动的情况。

1. 安装fontmin

npm i -g fontmin

2. 配置，在项目中创建fontmin.js

var Fontmin = require('fontmin');var srcPath = 'font/*.ttf'; // 字体源文件路径var destPath = 'font';    // 字体输出路径var text = '我你今天中大奖了快来领红包';//有哪些文字可能需要用到这个字体的,都可以在这里进行配置// 初始化var fontmin = new Fontmin()    .src(srcPath)               // 输入配置    .use(Fontmin.glyph({        // 字型提取插件        text: text              // 所需文字    }))    .use(Fontmin.ttf2eot())     // eot 转换插件    .use(Fontmin.ttf2woff())    // woff 转换插件         .use(Fontmin.ttf2svg())     // svg 转换插件    .use(Fontmin.css())         // css 生成插件    .dest(destPath);            // 输出配置// 执行fontmin.run(function (err, files, stream) {    if (err) {                  // 异常捕捉        console.error(err);    }    console.log('done');        // 成功});

3. 输出，执行fontmin.js文件就可以配置好的目录下输出对应的字体及css文件,字体文件也会由原来的即M变成几k了

node fontmin.js

以后再有任何文字需要使用字体, 直接添加到fontmin.js中的text中,执行node fontmin.js命令就搞定了。

转载地址：http://xaqzi.baihongyu.com/