Web Fonts研究和应用.docVIP

Web Fonts研究和应用 　　摘要：在网页设计中，目前显示的字体类型都是操作系统所支持的字体，如何能使网页支持更多的字体类型，尤其是中文字体类型，是一个尚待解决的问题。本文介绍了现有的主要Web Fonts解决方案，包括@fontface、Cufon、Google Font API，比较了这些方案的优缺点。 　　关键词：网页字体 网页设计 　　中图分类号：TP202 文献标识码：A 文章编号：1672-3791（2012）09（b）-0022-01 　　随着互联网的应用，人们对界面设计和用户体验有了更高的要求，因此，网页设计人员希望在进行界面设计的时候能够使用更多的字体类型，使浏览效果更加美观。然在网页设计中，目前显示的字体类型都是操作系统所支持的字体，由于这个限制，加上浏览器所依赖的操作系统各不相同，只有少数几种通用的字体才能显示在浏览器中，例如英文字体中的Times New Roman，中文字体中的宋体、黑体等，这给网页设计人员带来了很大的限制。设计人员为了使用更多的字体类型，最常用的办法是把文字做成图片，这样做有很多缺陷，这样做有几个明显缺陷：（1）不能大范围使用该字体；（2）图片内容相对使用文字不易修改；（3）不利于网站被搜索，因为主流搜索引擎不会将图片中包含的文字内容作为判断网页内容相关性的有效因素。 　　鉴于以上缺陷，近年来出现了多种Web Fonts 技术，旨在为网页设计人员提供更多的字体支持，常见的有@font-face、Cufon、Google Font API等，这些方案得到主流浏览器的支持；与此同时Typeki之类的收费和免费网络字体也开始不断出现。 　　1 Web Fonts的主要解决方案 　　1.1 @font-face属性 　　@font-face是所有解决方案中受到关注最多的，在CSS2的特性中就包含，直到CSS3中才广泛使用，可以不再依赖于Flash、PHP，渲染的是真正的字体，而不是向量对象或图片，因此文本可以被选择、放大，使用CSS修改样式。其通过加载服务器端的字体文件把特殊的网页字体嵌入到所需网页中，呈现给用户。网页设计人员要做的工作有以下几方面。 　　（1）下载字体文件。 　　（2）转换成所需的TrueType（.ttf）、Web open font format（.woff）、Embedded OpenType（.eot）、SVG Font（.svg）字体格式。 　　（3）通过@font-face引用不同格式的字体文件。 　　使用此方案实现的优点是保持了可用性，支持Unicode，并且支持CSS字体格式；缺点则是一些字体文件下载起来较大，不同浏览器之间没有统一的格式。 　　1.2 Cufon 　　使用cufon是一个简单有效的方法，它不需要依赖服务端的语言或者插件，只需要几行javascript代码就可以工作，它使用HTML5的画布特性渲染字体，使用VML渲染字体。其实现在网页中对文字字体进行渲染功能的纯JavaScript开源类库，基本原理是通过生成器将字体文件转化为SVG字体，再转化为VML文件，最后使用复杂的JavaScript函数将VML文件编码为JSON文件。 　　Cufon对很多网页设计师来说是一个很流行的选择，优点很多，且为主流浏览器所支持，设计师可以直接对替换的文字应用CSS样式。若想使用cufon，网页设计人员要做的工作有以下几方面。 　　（1）引入Cufon核心库：cufon-yui.js。 　　（2）创建和引用Cufon字体文件。 　　（3）使用Cufon.replace方法对标记字体进行渲染。 　　当用户去浏览页面时，通过浏览器的专有页面绘画功能，如VML、Canvas和SVG等，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。 　　使用Cufon实现的优点是：被浏览器原生支持，不需要加载浏览器插件；兼容各个主流浏览器；容易使用，不需要配置；能够快速渲染大量字体。存在的一些缺点是依赖于JavaScript，文本无法被选中；无法实现悬停变换效果；并且可用性和用户体验都不是很理想。 　　1.3 Google Font API 　　Google Font API使用起来比较方便，所有的字体都是开源的，只需从谷歌那里链接一个CSS文件并引用字体名即可。网页设计人员要做的工作有以下几方面。 　　（1）进入Google Font Directory选择合适的字体。 　　（2）引用字体文件，这些文件托管在谷歌的云中。 　　（3）使用字体，将html节点的font-family样式设置为上面引用的字体。 　　Google Font API是借助于浏览器可加载服务器端字体文件的功能来实现的，此功能的使用是通过在样式中定义@font-fa