页面引入外部字体ttf，如何提取所须要的ttf字体或者加载过慢的解决方法-1127更新

最近几天编写手机端的页面以后，文中须要华文行楷字体，在网上下载后，引入到了本身的前端页面,觉得没有什么事了，继续码代码

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

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

 

方法一：搜索关键词，ttf提取工具（方法失败）

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

 【下载】http://download.csdn.net/detail/ldpjay/8822587

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

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

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

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

 

可是我的根据此方法试了好屡次都是失败了结，同事也试了好屡次，不知道缘由出如今哪，是输出了，6k的大小，不管是输入什么文字。目前还不知道问题出如今哪，若是您看到而且试验成功的话，欢迎交流一下！

 

方法二：FontCreator字体编辑软件

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

 

方法三：搜索关键词，压缩ttf工具

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

一、node -v ：安装完node以后，测试node是否安装
二、npm config set registry http://registry.npm.taobao.org
三、npm info underscore （若是上面配置正确这个命令会有字符串response）
四、npm –registry http://registry.cnpmjs.org info underscore：命令行指定
五、npm install font-spider –g：安装字蛛
六、font-spider C:\Users\wangchao\Desktop\index*.html：生成新的字体库，nodejs 命令行输入

也就是你的html完整路径 【*】 是通配符，表示会扫描全部的html文件 ，而后回车

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

 

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