Lync.in

首先说明一下，在这里讨论的均是 Windows XP 操作系统下的情况，其他操作系统下我还没有机会进行测试。

首先让我们来看看什么是 OpenType 字体：（via Wikipedia）

OpenType，是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为 .otf，类型代码是OTTO，现行标准为 OpenType 1.4。

下面是一些 OpenType 字体的例子：

• Myriad Pro

  

• Trajan Pro

  

• Adobe Garamond Pro

  

上面给出的截图都是在我 Windows 下的 Firefox 3.5.5 中渲染出的字型截图。下面给出一张同样环境下 TrueType 类型字体 Garamond 的渲染效果截图：

• Garamond

  

经过与 TrueType 字体进行比较后我们可以明显地发现 OpenType 字体在 Windows 下的渲染效果更加平滑美观：

事实上多数用户的系统中是不会安装"Myriad Pro"、"Trajan Pro"这种 OpenType 字体的，所以说在网页中使用这类字体只能算是一种“锦上添花”。可是，利用 CSS 中的 font-family 属性，我们是可以对网页中的字体进行优雅降级(Graceful Degradation)的，即使是少数用户可能享受到的效果，也值得去进行进一步设计。

但是在实际应用的时候，却不得不面对现实：应用 OpenType 字体的网页在各个浏览器下的表现并不一样，在中英文混排的时候甚至会让 Google Chrome 无法正常显示中文。我对 6 种字体在各个浏览器下进行了测试，让我们来看看测试的结果（在这些字体都已安装的情况下）：

Firefox 3.5

这个结果和我们预期的完全一致。在设为不包含中文字符的字体时，中文字体为系统默认的宋体。

IE 6 ~ IE 8

IE 6 ~ IE8 下的显示效果如出一辙，但是和我们预期的有一处不同：在将字体设定为包含中文字符的 OpenType 字体（如"Adobe 黑体"）时，在 IE 下中文字体仍然显示为宋体。而对于 TrueType 字体（如"微软雅黑"）则没有这种情况。

Google Chrome 4

在 Chrome 下，悲剧出现了，在不包含中文字符的 OpenType 字体下（如"Myriad Pro"、"Trajan Pro"），浏览器没有选择系统默认的中文字体，而是将所有中文字符显示为一个带叉的方框。而包含中文字符的情况下（如"Adobe 黑体"）则表现良好。同时，不包含中文字符的 TrueType 字体下（如 Garamond）则能正常地回退到系统默认的宋体。

Opera 10

Opera 10 下，效果和 Firefox 3.5 下一样，未发现问题。

Safari 4

Windows 下的 Safari 是不支持 OpenType 字体的，从结果来看，所有情况下都能回退到正确的字体（TrueType 字体如 Georgia、Arial）。

总结

看了上面在不同浏览器下的不同效果，我们可以得到如下结论：

1. 由于 Chrome 下设定不带中文字符的 OpenType 字体后无法正常显示中文（即使 font-family 中后续带有中文 TrueType 字体也不能解决问题），所以在中英文混排的情况下使用非中文的 OpenType 字体意味着放弃 Chrome 用户。
2. 在使用中文 OpenType 字体时，在 IE 下中文字体总是显示系统默认字体，而英文字体则采用该预设字体中的英文字型。同时 IE 一旦在 font-family 中匹配了一个字体就不会继续搜索下面的字体，所以就算后续字体设为中文 TrueType 字体也无济于事。也就是说，设置中文 OpenType 字体，在 IE 下起不到多大作用（除非你特别喜欢该中文字体的英文字型），而在非 IE 的浏览器内都能正常显示。
3. 在纯英文的情况下，可以自由使用 OpenType 字体，在各浏览器下都有不错的显示效果。

我个人很喜欢 "Myriad Pro" 这款字体，而且也看见过不少将其设为首选字体的网站，偶然发现 Chrome 下的严重问题，于是便在各个浏览器下进行了测试，希望能让大家知道什么时候能在网页中应用 OpenType 字体，以及用的时候应该注意些什么。毕竟，想锦上添花但最后弄巧成拙的话也是很令人郁闷的。