众所周知,“微软雅黑”是个炸弹,不敢碰。上网一查,有个“思源黑体”,免费,好看,就它了!
字体库有两种使用方法:
本地使用
一、下载字体库
推荐地址:字体天下
网站搜索思源黑体,然后点击下载
二、解压,移动到项目中
解压后选择一个字体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";}
效果如下:
细心的朋友可能又发现了一个问题:为什么前两句古诗词的字体跟后面不一样呢?
不要慌
因为在生成字体的时候,只输入了“人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。”这两句诗词,字体库中也就只有这两句诗词中的汉字。
注意:阿里这个字体生成库,是需要你输入你要使用的汉字,然后生成字体,代码中才能使用。你没有输入生成,但是在项目中使用了其他汉字,并不会使用这个字体库。