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

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

fontmin

为何力荐fontmin?

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

fontmin的特点

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

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

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

fontmin下载

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

fontmin的具体操作

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

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

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

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

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

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

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

关于fontmin的建议

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

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

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

label自定义的惨痛教训

修改label文字: source.DefaultLabelProperties.Style.Font.Size=9; 修改文字的位置: source.Defa...

21660
来自专栏DannyHoo的专栏

iOS开发中使用系统中没有的字体-swift

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

11930
来自专栏菜鸟计划

javascript简史

一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

29050
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容 Ø 幻灯片效果的切换     最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures h...

21760
来自专栏IT可乐

frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使...

26690
来自专栏程序员的知识天地

HTML/CSS/JS 是如何在浏览器中,渲染成你看到的页面?【图解Chrome】

Chrome 算是程序员的标配了,从全球的市场份额来看,它在全球市场的份额已经超过 60%。

43140
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了菜单模块的处理,主要介绍如何动态从数据库里面获...

352100
来自专栏Ray学习笔记

Jump Start Bootstrap 第2章

在这一章,我们将讨论Bootstrap一个最重要的功能:网格系统。我们将学会网格系统如何工作;我们如何在应用中使用网格系统;我们也将创建简单的网页布局去更好的理...

13440
来自专栏数据小魔方

自定义下拉菜单

今天跟大家分享怎么利用excel的数据有效和开发工具制作自定义下拉菜单! 下拉菜单是我们经常会用到的高效录入数据方式,可以减少我们录入大量数据时的繁琐过程。 本...

36160
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第六天

31350

扫码关注云+社区

领取腾讯云代金券