原文地址:http://alistapart.com/article/the-era-of-symbol-fonts
原作:BRIAN SUDA 2013.3.12 发表于A List Apart
翻译:王成文、王永强

性能优化是一个永无止境的过程。起初,我们使用css技术取代传统的table布局、空白gif占位图片1和一些像<font>这样的内联标签,压缩页面大小,分离样式和结构。后来,我们开始关注页面中的DNS请求,缓存,文件总数这些问题,并且开始使用css sprites技术,把页面中的很多小图片抽离出来,合成到一张背景图片中。

1空白gif占位图片:http://en.wikipedia.org/wiki/Spacer_GIF

现在,是时候迎接第三个具有划时代意义的性能优化技术——图形字体。

使用图形字体技术,我们就可以把一堆小图标整合到一个单独的字体文件中。在缓存和文件大小方面,图形字体和css sprites具有同等优势,此外我们现在还发现它在高分辨率屏幕上有着独特优势。在这篇文章中,我将向大家展示使用图形字体的诸多优点,以及使用过程中将会遇到的问题。

流畅的用户体验

随着针对网页图标、符号和装饰图形所设计的字体越来越多,一些高流量网站已经开始使用图形字体替换掉网页上的图片。最知名的一个案例就是GitHub,GitHub使用Octicons这个自定义图形字体文件,替换掉页面中的小图标,有效提升了网站的访问速度和用户体验。

图形字体会将HTML中的栅格图片替换为平滑的矢量图片。这点非常关键,因为栅格图片是针对特定分辨率设计的,所以在像素密度较高的情况下,比如像现在常见的高分辨率显示器上,这些栅格图片必须被拉伸显示(如iphone5是将图片拉伸2倍显示),这就导致图片看起来更“栅格化”(模糊)。但是矢量图片就不会出现这个问题,它可以随意地在任何分辨率显示器上被无限地放大或者缩小。

在过去,在HTML页面中嵌入矢量图形受到诸多限制。PDF和SVG虽然可行,但存在着交互上的问题。字体是矢量图形,并且包括IE6在内的所有WEB浏览器都能够在HTML页面中渲染字体。使用字体嵌入,支持高分辨率显示器,浏览器普遍支持等特点,使得这项技术为我们进一步优化网页性能和用户体验创造了新的机遇。

无障碍

说到无障碍,图形字体处于比较矛盾的境地,它作为图片使用时表现糟糕,但作为文字则相当出色。

很多早期的图形字体是把图形映射到ASCII编码表中的一个字符。例如输入一个‘w’则会显示一个地球图标,输入‘m’会显示一个信封图标。 通过简单的输入,可以很方便的看到字母所指代的图形。 但当字体嵌入失败时,问题就来了,输入的字符可能会产生一些无意义的字母。 比如,你输入的字符是想显示一个箭头,紧挨着的是文本‘Next’,则HTML代码可能如下:

<div><span class="icon">L</span> Next</div>

但是如果css、javascript、或者字体加载失败,你只会看到字符‘L’而不是左箭头符号。 当然你可以提供降级方案,用javascript或者css代码中的:before或者:after来插入有意义的代码, 但是搜索引擎爬虫最终能索引到的可能还是‘L Next’文本而已。

有一个更好一点的办法。

我们已经成功地使用Unicode私有区字符2解决了上面这个问题,并且从中学到了很多东西,使得我们的解决思路更加成熟。Unicode私有区内的字符和字母表中的字母没有对应关系。如果某个字体不可用或者没有加载成功,这个私有字符则会显示为一个空框。

2 Unicode私有区字符http://en.wikipedia.org/wiki/Private_Use_(Unicode)

等等,我们还可以做的更好!

字体中有一些特殊的字符,称之为连字3——连字的设计巧妙至极,很少有人注意到,它主要被用来优化字体,增加可读性。比如,两个连续的字符f会是一个连字。一个设计良好的字体会把‘ff’转换为一个连字以使两个f之间的连接更加平滑自然。字体中有一些标准的连字,包括ff,fl和fi等等。但是也没人规定你不能定义自己的的连字。在字体文件中,连字只是一个简单的替换。只要发现有正确顺序的连续字符,就将其替换为连字。输入这些字符时,这些字符会被替换成其他的图形。这意味着,你输入一个像‘A List Apart’这样的字符串,可以得到一个对应的logo图标。

3连字http://zh.wikipedia.org/zh-cn/%E5%90%88%E5%AD%97

那些不支持字体嵌入的浏览器——也就是搜索引擎爬虫,则会索引原始的没有经过连字处理的文本,而在能够够渲染这些字体和连字的设备展示出的却是一些很漂亮的矢量图形。这是个两全其美的绝妙办法,比HTML和CSS高出好几个段位。

一旦你明白了连字的工作原理,你就会发现一座新大陆。那些用在导航中的看得见却摸不着4的图标可能只是一些字体符号,而在其背后支撑的则是连字。因此你的HTML代码看起来是这个样子:

4 mystery-meat: “看得见却摸不着”在原文中为mystery-meat,一种俚语,是指(尤其是指学生食堂)看不见肉的菜肴,此处的语义是说,你能看到图标,却找不到产生图标所对应的代码,即使找到代码,也不容易明白这些代码为什么会产生这样的图标。

<ul>
         <li>Home</li>
         <li>Contact</li>
         <li>About</li>
         <li>Cart</li>
</ul>

但渲染的结果可能会是这个样子:

enter image description here

Symbolset网站尝试使用连字和图形字体已经有段时间了,现在它在销售一些常用图标的图形字体包。Symbolset提供的字体完美支持连字,并且提供demo,在demo里你输入关键词就能立刻看到与其对应的图形。不要太惊讶,这效果可能会让你产生思与想斗争。

使用连字来替代图形已经有了很多的实际应用。比如,BBC新闻网站的以前在其首页的角上有个很有特色的时钟。这个时钟可以用Flash来实现,但是在某些设备不支持Flash且有替代方案的情况下,这么做就不那么明智了。另外一种选择是在使用CSS来旋转图片,并配合javascript定时器来实现。不过BBC最终采用了HTML5技术,使用Canvas和JavaScript不断重绘时钟的表盘。

不过这些非Flash技术都使用了栅格图片,这使得时钟在高分辨率显示器上显示不清晰。虽然有像Raphaeljs这样的JavaScript插件,能够创建SVG或者VML对象,让图形看上去既漂亮又是矢量的,但是由于是使用javascript加载创建的,搜索引擎爬虫或者不支持JavaScript的浏览器并不能识别这些图形对象。

使用图形字体来实现这个效果,就可以保证在无障碍访问和矢量化两方面都完美无瑕。输入12:00会显示一个时针和分针都指向12的钟表。输入12:01则会对应一个不同的连字从而显示相应的时针表盘。如果创建很多的连字,则可以制作出一个非常漂亮且跨平台的矢量时钟。实际上已经有好几个这样的时钟字体了;http://timepiece.inostudio.de 网站上有一些示例。通过查看源码,你会发现原理其实很简单。

想象一下将网页上所有的小图标或装饰全部整合到图形字体中。发挥你的想象力。你可以将项目编号、箭头、订阅源、社交媒体等各种图标及任何想要整合的图形全部打包成一个单独的体积很小的字体文件,这个文件可以被缓存,其中的图形可以在不用多套图片的情况下被渲染成任意尺寸任意颜色。

创建自己的图形字体

网页开发者和设计师必须熟悉Photoshop、Fireworks和其他软件。对于我们来说,使用css sprites或者背景图片并不是一个很大的飞跃,因为开发工具并没有改变。但针对图形字体,开发流程中就得多出一个工具:字体编辑器。这个工具需要我们从头学习,好在它不是很难。

可喜的是,已经有大量用于制作图形字体的工具存在了。例如, Icomoon可以让你在线上传自己的SVG文件,定义相应的Unicode字符,然后就可以导出一个对应的字体文件。

如果你想设计完全自定义的个性字体,怎么办?有很多工具可供你创建自己的字体。有一些专业软件是需要付费的,但是有一个最常见的免费工具:FontForge。该软件可能有点笨拙,但是有很多的帮助教程。

字体带来的问题

任何一个优秀设计师可能都会告诉你,图标或者logo在不同尺寸下会有不同的设计,比如改变线条的粗细,或在一些小尺寸上甚至得去除一些细节展现。然而使用图形字体时,你无法针对不同尺寸提供不同的设计方案。你的设计在20点大小时与120点或者6点效果必须是一样的。

如果你想针对不同尺寸的字体设计不同的效果,你就需要在这个字体文件中复制这些图标,然后根据使用情况选择相应的图标。这么做也会有个问题,因为你不知道最终用户是如何查看你的设计的。用户在浏览器中手动放大字体,字体不会跟着一起放大到大字体对应的图标。对大多数人来说,这可能不是个问题,因为我们目前所使用的很多常用图标缩放之后效果良好。

使用图形字体还有另外一个问题,只能使用单色图形。你可以使用背景颜色和字体渐变来模拟一个双色logo,但是如果你的图标是彩色的,目前的图形字体就无能为力了。

为了解决这个问题,苹果公司正在提议推广彩色字体,这项技术能让你在网页中嵌入完美的彩色矢量图形。苹果公司在该领域的首次尝试成果就是Apple Color Emoji字体,如果你使用的是OSX Lion系统,系统已经安装这种字体了。但是引入一种新的字体格式的问题就是,缺乏浏览器的支持,并且字体创建工具也需要做相应的更新,这也就是说这项技术离可行还有很长一段时间。

奔向新时代

图形字体是网页设计和性能优化的下一个前进方向,所以你需要理解它们在WEB上的工作原理。通过不断的实践,你就可以创建你自己的图形字体,以此来将logo、图标等品牌元素嵌入你的网页。这些细小的改进不仅能够给你的用户留下良好印象,同时还能提升网站的性能。同志们,让我们开始大胆地使用图形字体——并在使用中帮助完善相应的工具、标准和技术。