某些特定情况下,设计师为了页面美观,会选择一些特定的字体,由于系统的支持程度不同,前端需要引入字体包,才能让效果百分百呈现。但如果设计提供的字体包太大,又没有通过工具将字体包提取成一个只有几个字的新字体包给前端的话,字体包会非常大,严重影响页面加载性能,做了以下尝试后,成功将一个8MB的字体包变成了8KB,与大家分享:
前期准备:
1、mac 或 linux 、Java环境(Java下载地址)
(下载成功后打开命令窗口输入:java -version,出现版本号表示安装成功)
2、新建一个文件夹myFontsTool,等待存放字体相关内容
3、download此jar包(jar包地址)放到myFontsTool文件夹里
4、将准备提取的字体包(.ttf后缀的)放到myFontsTool文件夹里
5、新建text.txt(里面写上你要单独生成的内容),同样将text.txt放到myFontsTool文件夹里
开始生成:
1、打开命令窗口,进入myFontsTool文件夹,输入命令:
java -jar sfnttool.jar -s text.txt font.ttf fontc.ttf
text.txt ------ 存放需要提取的文字
font.ttf ------ 原字体文件名
fontc.ttf ------ 提取后的字体文件名
2、好啦,新字体包fontc.ttf已经生成在myFontsTool里啦,你可以在项目中引用啦:
@font-face{
font-family:'fontc';/*字体名称*/
src:url('fontc.ttf');/*字体源文件*/
}
备注:自己在运用的过程中,偶尔遇到字体包后缀为.OTF的,通常我会在网上搜一下在线.OTF转.ttf,在线转成.ttf的字体包,再运用以上方法提取;