HTML5学堂:此前,我们介绍过font-spider这款软件,也讲解过处理网络字体的方法。而今我们为大家介绍一款能够秒杀之前所有工具的“特殊字体”制作工具。
2016.04.13 开发手记:在使用该工具进行字体处理时,把需要的文字内容粘贴上去,不要换行,否则生成出来的字体,在部分手机当中会出现字符间距增大的现象。(来自HTML5学堂好友 - 黄政剑)
为何力荐fontmin?
方便,快捷~!不需要自己手动抠文字,直接生成各类文字字体,而且代码也可以直接生成。
子集化(只取用当前字体中的部分文字)后的字体删掉了所有没用空字符,不需要另开fontcreator进行二次精简
无论原字体的映射怎么乱七八糟,子集化后的映射平台自动改为两个必要的unicode平台,使得在理论上所有字体都能精简,所有设备上阅读器都能正常识别
简言之,就是既能删除多余文字,也能够调整文字映射。
fontmin官网:https://ecomfe.github.io/fontmin
fontmin下载地址:可以采用上面的链接地址(不过,下载速度太慢了~~~),也可以采用这个地址:点击下载fontmin软件。对于Mac版本或win32版本可以通过官网地址下载。
1 打开软件(无需安装,打开即用)
2 输入需要采用特殊字体的文字
3 将字体拖拽到相应位置,点击“生成”
4 把生成的文件复制/剪切到指定位置即可
会生成各类字体文件,同时还有CSS文件,可以使用编辑器打开CSS文件,内容如下(我此处使用的是汉仪雪君体简的字体)
测试页面效果:(制作字体包时输入的所有文字都变成了“汉仪雪君体简”,没有在字体包中的文字依旧是默认宋体)
1 个人建议采用英文的名称命名字体,而不要采用中文(一出现中文就很有可能出现乱码问题)。换句话说,修改案例中的“汉仪雪君体简.css”里面的font-family的属性值以及所有的字体名称,保持一致即可。
2 如果发现在阅读器上还是无法显示,请用fontcreator把第一个空字符删了再重新插入这个空字符,就是映射总是$0000的那个。这个并不属于软件bug,fontmin会完整保留第一个空字符所有映射,因此可能导致与后来改的字符映射产生冲突,而在移动设备无法正常显示。各位按上面方法手动处理一下就好(并不是每个都会发生的,如果出现冲突也会有弹窗的提示)。
本文章内容小编:HTML5学堂-利利。耗时3h~额外感谢HTML5学堂的昌昌推荐这个工具。
欢迎沟通交流~HTML5学堂