页面引入外部字体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，步骤也不是很长。

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里面，直接用就行了

 

 

转载于:https://www.cnblogs.com/hjt-7/p/7116452.html