字体库（阿里巴巴矢量图标库）使用两三坑

众所周知，“微软雅黑” 是个炸弹，不敢碰。上网一查，有个“思源黑体”，免费，好看，就它了！
字体库有两种使用方法：

本地使用

一、下载字体库

推荐地址：字体天下
网站搜索思源黑体，然后点击下载

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

细心的朋友可能又发现了一个问题：为什么前两句古诗词的字体跟后面不一样呢？
不要慌

因为在生成字体的时候，只输入了“人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。”这两句诗词，字体库中也就只有这两句诗词中的汉字。
注意：阿里这个字体生成库，是需要你输入你要使用的汉字，然后生成字体，代码中才能使用。你没有输入生成，但是在项目中使用了其他汉字，并不会使用这个字体库。