WOFF 使用指南

于一月21日发布的 Mozilla Firefox 3.6 版本题供了对于 WOFF (Web Open Font Format) 字体格式的支持。关于这一字体格式的意义，本站之前的《字体数字化简史与 WOFF》一文已有提及，而我们今天将简单地演示 WOFF 格式的具体使用及其效果。对于网页设计者来说，使用 WOFF 格式与使用此前已经被支持的 TrueType 或 OpenType 格式在方法上并无不同，都是通过 CSS 的 @font-face 等规则完成的。首先是通过指定 WOFF 格式的字体文件之 URL 来定义一个 font-family 名称：

@font-face { font-family: myfontname; src: url(link/to/the/woff-font/fontname.woff) format("woff"), url(link/to/the/ttf-font/fontname.ttf) format("truetype");}

通过以上代码，支持 WOFF 的浏览器如 Firefox 3.6 将自动下载 link/to/the/woff-font/fontname.woff 这一字体，不支持 WOFF 但是支持内联 TTF 的浏览器则会自动下载 link/to/the/ttf-font/fontname.ttf。（Internet Explorer 两者都不支持，对应解决方案请参见这里。）由网页设计者自行决定的 myfontname 则是这些字体的代称，设计者可以在接下来的 CSS 中使用它来定义页面元素所使用的字体，例如：

#content{font-family: myfontname, Georgia, serif;}

此外，仅限于 Windows、Linux 平台的 Firefox 非标准 CSS 属性 text-rendering 同样可以用来控制 WOFF 的渲染方式。其可取值及对应效果是：

auto默认值。浏览器会自行猜测应该优化字体的渲染速度、可读性还是精准度。对于基于 Gecko 引擎的浏览器如 Firefox 而言，取此值也就意味着对尺寸大于20像素的文本会使用 optimizeLegibility，否则使用 optimizeSpeed。optimizeSpeed优化速度。Gecko 将尽可能快速地渲染字体，而不保证字体的可读性和精准度。Kerning （字母间距微调）和 ligatures （连字）将被禁用。optimizeLegibility优化可读性。Gecko 将强调文本的可读性而不是字体渲染的速度和精准度，Kerning （字母间距微调）和 ligatures （连字）也会被启用。geometricPrecision优化精准度。Gecko 将强调字体渲染的精准度而非速度和可读性，目前其效果与 optimizeLegibility 相同。

请注意这一属性会被 Mac 平台上的 Gecko 引擎忽略，渲染效果将总是 optimizeLegibility。

具体用例如下：

/* make sure all fonts in the HTML document display in all its glory, but avoid inadequate ligatures in class foo elements */body { text-rendering: optimizeLegibility; }.foo { text-rendering: optimizeSpeed; }

根据 Mozilla 的这篇文章，字体业界对 WOFF 的支持也已经开始。FontFont 甚至提供了一个免费的 WOFF 字体展示，其中除了包含本文所介绍的内容，还有 WOFF 的 MIME Type、防止字体外链的方法等。我们在这里给出一个略经修改的在线版本，当然需要使用 Firefox 3.6 来访问。Windows 用户请注意浏览时不应禁用 ClearType。