最近几天编写手机端的页面之后,文中需要华文行楷字体,在网上下载后,引入到了自己的前端页面,以为没有什么事了,继续码代码

@font-face {
                font-family:huawen;
                src: url(./css/华文行楷.ttf);
            }
            body{
                font-family: huawen;
            }

最终在测试的时候出现问题了,苹果手机的用户,基本看不出来什么问题,安卓测试了一下,页面打开时原来的字体,随着进度条的推移,慢慢华文行楷的字体出来了,问题,加载太慢了,看了一下引入的源文件"华文行楷.ttf" 3M,有点大。

 

方法一:搜索关键词,ttf提取工具(方法失败)

网上很多都是介绍了Google的一款工具,sfnttool 是谷歌开源项目 sfntly 内置的工具,他的作用是从一个字体文件中提取指定的文字,导出的字体中将只包含你需要的文字。

 【下载】

1. 确保你的电脑已经安装了Java环境(能运行Java命令),这是必须的。

2. 命令行进入到sfnttool所在目录下。(一个小技巧,在当前文件夹里按住Shift再右键,里面有个“在此处打开命令行”。)

3. 输入下面的命令即可:java -jar sfnttool.jar  -s '这是一段测试文字' msyh.ttf msyh_simplify.ttf  

4. 输出字体在同目录下。

 

但是个人根据此方法试了好多次都是失败告终,同事也试了好多次,不知道原因出现在哪,是输出了,6k的大小,无论是输入什么文字。目前还不知道问题出现在哪,如果您看到并且试验成功的话,欢迎交流一下!

 

方法二:FontCreator字体编辑软件

想着以为可以大量输入,但是想象是美好的,没有这个功能,需要手动一点点把需要的字体拿出来,是个漫长的过程,这个方法也就排除了

 

方法三:搜索关键词,压缩ttf工具

后来转换了一下思想,既然不能从我的 “华文行楷.ttf”里面提取我需要的字体,我的初衷是变小就行了,那就压缩呗!这个想法一有,就开始找实现的方法,html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】 一文吸引了我的注意,文章太长,先操作实现了一下,感觉ok,步骤也不是很长。

1、node -v :安装完node之后,测试node是否安装
2、npm config set registry http://registry.npm.taobao.org
3、npm info underscore (如果上面配置正确这个命令会有字符串response)
4、npm –registry http://registry.cnpmjs.org info underscore:命令行指定
5、npm install font-spider –g:安装字蛛
6、font-spider C:\Users\wangchao\Desktop\index*.html:生成新的字体库,nodejs 命令行输入

也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件 ,然后回车

方法四--1127更新:利用现有的在线字体提取工具-https://www.fontke.com/tool/subfont/

 

致此,压缩后的会保存在同级目录下的.font-spider里面,直接用就行了