特殊字体神器-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 条评论
登录 后参与评论

相关文章

来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

1816
来自专栏有趣的django

17.HTML

HTML简介 htyper text markup language  即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素...

3555
来自专栏飞雪无情的博客

Android技术文档翻译--工具属性(Tools Attributes)

原文地址 http://tools.android.com/tech-docs/tools-attributes

1113
来自专栏企鹅号快讯

常见的前端面试题,总有一点让你涨知识

首先在面试时,我会大声说:"本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、PHP、ASP、C、C++、C#、Java、R...

1967
来自专栏河湾欢儿的专栏

BOM

BOM 浏览器对象模型 定义了js操作浏览器的属性和方法 open(页面地址的url,打开的方式) 第一个参数,如果为空,默认打开一个空白的页码 第二个...

781
来自专栏天天

网页特殊字体过大的优化

==font-spider 仅适用于固定文本,如果文字内容为动态可变的,新增的文字将无法显示为特殊字体。==

1235
来自专栏Android Note

ConstraintLayout 之 Guideline、Barrier、Chains和Groups

1315
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用滚动区

1、添加一个滚动区。为方便查看,可以设置一个背景色 2、双击编辑滚动区 3、点击滚动条两端的按钮可以扩展或收缩滚动区中的内容。在两端按钮按下的同时,按...

2516
来自专栏WindCoder

为form表单相关组件添加适用于手机上的背景

将主要的代码记录分享出来,以下内容当初是为了适应于手机端,PC端直接引用会出现格式问题,具体的大家自己修改css样式吧,Dome会在最后放出一个整体的。

472
来自专栏小文博客

wordpress指针样式自定义——美化你的blog

1054

扫码关注云+社区