字体库(阿里巴巴矢量图标库)使用两三坑

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

本地使用

一、下载字体库

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

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大小,这是万万不可取的。


办法总比困难多,有三种解决办法:

下面下面我来说说怎么使用线上字体库

线上字体库使用

直接放地址:阿里巴巴矢量图标库

一、选择在线字体

让我们看图说话
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

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

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

推荐阅读更多精彩内容