众所周知，“微软雅黑” 是个炸弹，不敢碰。上网一查，有个“思源黑体”，免费，好看，就它了！
字体库有两种使用方法：
本地使用
一、下载字体库
推荐地址：字体天下
网站搜索思源黑体，然后点击下载
QQ20191021-150923.png
二、解压，移动到项目中
解压后选择一个字体copy到项目中，我这边选择的是NotoSansCJK-Regular-1
QQ20191021-151145.png
三、在项目CSS中引入字体
引入代码如下：
@font-face {
font-family: 'NotoSansCJK-Regular-1';
src: url('./font/NotoSansCJK-Regular-1.otf');
}
body {
font-family: "NotoSansCJK-Regular-1";
}
效果图:
QQ20191021-152155.png
细心的朋友可能会发现，这样引入有一个缺点，字体库有16.6M大小，这是万万不可取的。
办法总比困难多，有三种解决办法：
- 字蛛-一个中文字体压缩器
- 使用线上地址（CDN）
- 使用字蛛后放到线上（ps:没想到吧~）
下面下面我来说说怎么使用线上字体库
线上字体库使用
直接放地址：阿里巴巴矢量图标库
一、选择在线字体
让我们看图说话
1.在输入框输入文字
2.下拉，选择“思源黑体-普通”
3、点击生成字体，查看效果
QQ20191021-154311.png
二、引入字体
鼠标移到下面列表，会有“引用线上地址”和“本地下载”，“本地下载”跟第一种方式一样。
QQ20191021-154833.png
复制代码到style中
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_vc91uhbl9nm.eot');
/* IE9*/
src: url('//at.alicdn.com/t/webfont_vc91uhbl9nm.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('//at.alicdn.com/t/webfont_vc91uhbl9nm.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_vc91uhbl9nm.woff') format('woff'),
/* chrome、firefox */
url('//at.alicdn.com/t/webfont_vc91uhbl9nm.ttf') format('truetype'),
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/webfont_vc91uhbl9nm.svg#思源黑体-普通') format('svg');
/* iOS 4.1- */
}
body {
font-family: "webfont";
}
效果如下：
QQ20191021-155356.png
细心的朋友可能又发现了一个问题：为什么前两句古诗词的字体跟后面不一样呢？
不要慌
因为在生成字体的时候，只输入了“人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。”这两句诗词，字体库中也就只有这两句诗词中的汉字。
注意：阿里这个字体生成库，是需要你输入你要使用的汉字，然后生成字体，代码中才能使用。你没有输入生成，但是在项目中使用了其他汉字，并不会使用这个字体库。
