Hipo日志

web font实践

11/17/2012, 5:01:52 AM

Intro

因为css3的流行，@font-face也被越来越多的人熟知，因为其灵活配置的特点想将其用到公司的项目，于是有了这篇文章。

font-face应用的障碍之一便是其字体前期的制作成本较高，因此本文想简单分享下自己的制作经验。

首先需要的软件有adobe illustrator 和fontlab，fontlab在网上的版本大多不是最新版，因此在此也分享下该软件最新版本的下载，免去大家的麻烦，软件(5.2版本）+破解补丁下载，安装软件之后运行破解补丁就可以顺利破解（杀毒软件或许会报毒，请忽略）。

下面以新浪微博的图标为例，介绍下制作过程。

一，使用Ai将所要新浪微博图标的路径都勾了出来，如下图

新浪微博icon路径

2.在Fontlab中新建字体

fontlab

3.选择需要替换的字体，双击之后（该格子里面字符会下陷），右击，选择open glyph window，即进入新字体的绘制窗口。

Fontlab字体绘制窗口

4.将Ai中icon的路径全部复制过来（直接使用复制，网上所说的eps的方法，不知道为什么我这里一直不成功）。

Fontlab字体编辑

如上图所示，复制到虚线框框内，图上用红色框中的两个地方需要注意下，可以注意到，左边从A到D的距离为1000，姑且将这个算作一个字符单位，具体到css属性中为1px，因此你所制作的字体在虚线框中横向和纵向所占的比例，直接影响到之后应用时候font-size定义值和图标实际值得大小（此处和真正的字符不一样，我们的目标是将之前图片的icon编程矢量的字符，因此需要精准的尺寸掌握），因此我的建议是，在横向方向上最好也将虚线框的范围拉到1000的位置，即图中右边红色框的位置。

这样你所制作出的web font的尺寸就可以很好的通过css属性中font-size属性来把控。

**知识补充：**左边框中不同字母代表字体不同的属性，不同字母依次所代表的意义如下图（来源于网络）

5.就是导出字体格式的文件，下图是自己制作web font简单的效果。

social-web-font

考虑到网上的web-font库中很少有国内社交网络的icon，因此制作了新浪微博，QQ空间，腾讯围脖，人人网四个常用的icon，Ai文件，ttf格式，otf格式。（大家各取所需;)）。

最后就是浏览器的兼容问题

IE只支持EOT
Mozilla支持OTF和TTF
Safari支持OTF, TTF和SVG
Chrome支持TTF和SVG
iPad和iPhone上的Safari需要SVG。

因此需要四种格式的字体，可以在fontsquirrel.com上fontface-generator这个在线工具提交fontlab生成的字体，然后下载包含全部四种格式的字体文件和demo页面的压缩包（具体可以查看此demo）。

然后需要提及的是css的书写问题，在此贴一个比较流行的方法。

css：

@font-face { font-family: 'WebSymbolsRegular'; src: url('WebSymbols-Regular-webfont.eot'); src: local('I am miyukizhang'), url('WebSymbols-Regular-webfont.woff') format('woff'), url('WebSymbols-Regular-webfont.ttf') format('truetype'), url('WebSymbols-Regular-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; }