前言
2016年末时,给摇一摇写一个手机端页面,实话说,拿到psd,平铺直叙的静态页,没什么技术含量,思索着是不是要换个雅观的字体。人总是想当然天真的以为中文的字体包能拿来直接用,然而现实给我一记重锤眩晕,一个粑粑字体包竟然要12mb,果然我还是太年轻。
这简直是一个大写的尴尬,年轻的我意识到,中国文化之所以博大精深,正是体现在生活中的点点滴滴,我滴天啊,只好删掉字体包,去掉@font-face,忙这忙那的,过去了三五天,直到那一抹柔情的出现……
一、那54kb的柔情,让我把持不住——压缩中文字体包的线索
转眼已经2017,接近年关,众多精致的微信H5纷繁而至,其中一个是智慧火车,从遥想当年绿皮到秒速97.222米,也只是弹指挥间,这之间有忘掉的,更有忘不掉的,简单有趣的回忆。
翻看这个H5的js和css文件,学到了很多东西,看到了css中的那段@font-face,嗯?通过url下载,果然是“别人家”的字体包要友好很多,只有54kb,这是什么黑科技!!!
还记得上学时老师说过的话吗,“我会教你百度的方法”,先来一波百度,效果不是很理想啊,都是些落后的字体软件,pass。久寻不得, 看来需要亲友团场外援助,得到的答案是——去百度。
姜还是老的辣,真相只有一个!!!
二、这一切一切的背后,只有真相——字蛛
三、整装备战,蓄势待发——安装与使用
嗯,首先我们应该有nodejs,没有的赶紧安装啊!
node.js官网:https://nodejs.org/en/
安装过后记得看一下环境变量,输入path看看nodejs在不:
完美,有了nodejs,我们就可以用一行命令完成“字蛛”的安装:
npm install font-spider -g
到这里“字蛛”已然安装完成,最终需要我们落下打破中文字体包壁垒的最后一锤!
在css中使用webfont,我选择的是华文楷体(依稀记得有人用微软雅黑被告):
/*声明 WebFont*/
@font-face {
font-family: 'STKAITI';
src: url('../font/STKAITI.ttf');
src:
url('../font/STKAITI.eot?#font-spider') format('embedded-opentype'),
url('../font/STKAITI.woff') format('woff'),
url('../font/STKAITI.ttf') format('truetype'),
url('../font/STKAITI.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
span {
font-family: 'STKAITI';
}
最后一步
找到你的html文件位置,输入命令
font-spider .\somewhere\something.html
生成了新的字体文件
用完了,感觉棒棒的!!
让我们看一下最终效果,哒哒~
还记得程序员间流传至今的一句老话吗:
技术只会迟到,但从未缺席