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