HTML5学堂-码匠 HTML5学堂

您当前位于:开发工具 ——> WEB前端 网页特殊字体的制作工具-fontmin,更方便

WEB前端 网页特殊字体的制作工具-fontmin,更方便

2016/03/12 20:07:32 | 作者:HTML5学堂(码匠) | 分类:开发工具 | 关键词:fontmin,特殊字体,自定义字体,网络字体

特殊字体神器-fontmin,秒杀一切工具

HTML5学堂:此前,我们介绍过font-spider这款软件,也讲解过处理网络字体的方法。而今我们为大家介绍一款能够秒杀之前所有工具的“特殊字体”制作工具。

2016.04.13 开发手记:在使用该工具进行字体处理时,把需要的文字内容粘贴上去,不要换行,否则生成出来的字体,在部分手机当中会出现字符间距增大的现象。(来自HTML5学堂好友 - 黄政剑)

fontmin

为何力荐fontmin?

方便,快捷~!不需要自己手动抠文字,直接生成各类文字字体,而且代码也可以直接生成。

fontmin的特点

子集化(只取用当前字体中的部分文字)后的字体删掉了所有没用空字符,不需要另开fontcreator进行二次精简

无论原字体的映射怎么乱七八糟,子集化后的映射平台自动改为两个必要的unicode平台,使得在理论上所有字体都能精简,所有设备上阅读器都能正常识别

简言之,就是既能删除多余文字,也能够调整文字映射。

fontmin下载

fontmin官网:https://ecomfe.github.io/fontmin

fontmin下载地址:可以采用上面的链接地址(不过,下载速度太慢了~~~),也可以采用这个地址:点击下载fontmin软件。对于Mac版本或win32版本可以通过官网地址下载。

fontmin的具体操作

1 打开软件(无需安装,打开即用)

2 输入需要采用特殊字体的文字

3 将字体拖拽到相应位置,点击“生成”

4 把生成的文件复制/剪切到指定位置即可

fontmin的基本使用

使用fontmin,自动生成的各类文件

会生成各类字体文件,同时还有CSS文件,可以使用编辑器打开CSS文件,内容如下(我此处使用的是汉仪雪君体简的字体)

  1. @font-face {
  2.     font-family: "汉仪雪君体简";
  3.     src: url("汉仪雪君体简.eot"); /* IE9 */
  4.     src: url("汉仪雪君体简.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  5.     url("汉仪雪君体简.woff") format("woff"), /* chrome、firefox */
  6.     url("汉仪雪君体简.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  7.     url("汉仪雪君体简.svg#汉仪雪君体简") format("svg"); /* iOS 4.1- */
  8.     font-style: normal;
  9.     font-weight: normal;
  10. }

测试页面效果:(制作字体包时输入的所有文字都变成了“汉仪雪君体简”,没有在字体包中的文字依旧是默认宋体)

fontmin 测试效果

关于fontmin的建议

1 个人建议采用英文的名称命名字体,而不要采用中文(一出现中文就很有可能出现乱码问题)。换句话说,修改案例中的“汉仪雪君体简.css”里面的font-family的属性值以及所有的字体名称,保持一致即可。

2 如果发现在阅读器上还是无法显示,请用fontcreator把第一个空字符删了再重新插入这个空字符,就是映射总是$0000的那个。这个并不属于软件bug,fontmin会完整保留第一个空字符所有映射,因此可能导致与后来改的字符映射产生冲突,而在移动设备无法正常显示。各位按上面方法手动处理一下就好(并不是每个都会发生的,如果出现冲突也会有弹窗的提示)。

本文章内容小编:HTML5学堂-利利。耗时3h~额外感谢HTML5学堂的昌昌推荐这个工具。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端