web font实践

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

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

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

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

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

新浪微博icon路径

新浪微博icon路径

2.在Fontlab中新建字体

fontlabfontlab

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

Fontlab字体绘制窗口Fontlab字体绘制窗口

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

Fontlab字体编辑Fontlab字体编辑

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

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

知识补充:左边框中不同字母代表字体不同的属性,不同字母依次所代表的意义如下图(来源于网络)

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

social-web-fontsocial-web-font

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

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

  • IE只支持EOT
  • Mozilla支持OTFTTF
  • Safari支持OTFTTFSVG
  • Chrome支持TTFSVG
  • 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; }

——————–

最后介绍一个web font的平台icomoon.io,其App页面可以定制自己的web-font,最终导出兼容各个浏览器文件,icon可以从里面提供的库里选择(有免费库),甚至可以上传svg和字体。

因此,比较取巧的方法是在Ai中直接导出svg的文件(免去使用fontlab制作字体的步骤),在iconmoon上面自动生成各个格式的文件,点此demo可以查看iconmoon上最终的效果。

参考资料:

1.CSS3 icon font完全指南

2.Illustrator绘制字体形状导入到FontLab

3.如何灵活利用免费开源图标字体-IcoMoon篇

4.@font-face使用指南

5.font-face浏览器支持

——————11.22新增了几个样式——————

HiccSocialIcon

HiccSocialIcon下载(包含EOT,OTF,TTF,SVG,AI文件)

—–附美图一张————-

Journey with brownieJourney with brownie

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus