即使使用相同的CSS规则和字体文件,也无法完全相同地呈现:
现代字体格式由重叠的指令层组成,而“新的更好”的方式并不取代以前的迭代,而是在此基础上增加。优点是旧软件仍然可以读取旧式指令并像以前一样工作。缺点是同一属性用许多不同的方式描述,它们不会产生相同的结果(你可能认为最新的层会产生最好的结果,但字体设计师可能只测试和调试了较早的版本)。更令人沮丧的是,有些还是针对特定系统的(Windows、OS∕2、OSX……),因此即使是同一代软件,也根据目标系统读取不同的指令。
最后,即使一个字体只包含单个指令层,而且所有浏览器都完全读取它,它们也会有一些余地来解释它。在理想的视网膜屏幕上,具有高像素密度,它们将使用相同的形状和坐标,但实际屏幕的像素密度过低,无法准确显示小的复杂文本形状。因此,文本引擎在显示锐利但乏味的线条(扭曲字形,使其与单色像素网格对齐)或平滑但模糊的线条(通过调节像素灰度级别甚至亚像素颜色来近似理想形状)之间有选择。这些调整将移动文本像素。
根据系统,文本呈现约定不相同。OSX 倾向于平滑模糊渲染,Windows 倾向于锐利乏味的渲染,而 Linux 则涵盖了中间所有选择。
当然,即使在同一台计算机上,同一软件也会根据可用硬件的质量(像素密度)做出不同的选择。
如果您想了解文本引擎可以选择的所有可能的渲染策略,请参见以下链接:
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M
通常情况下,您无法控制浏览器从您的网站选择的文本呈现折衷方案。即使您可以强制在 OSX 上使用 Windows 样式的呈现方式(或反之亦然),这也只会使用户感到烦恼,因为他们希望您的网站与屏幕上看到的所有其他文本一样行为。事实上,您的网站对浏览器字体呈现选择的容忍程度越高,它就越好。网站是动态的。网站可以重新流动。像素完美并不是用户理想。如果您想要像素完美,请向他们提供位图图像,您很快就会看到它有多受欢迎。
因此,只有在特定的设计效果下才使用@font-face,而不是试图强制在您的网站上放置特定的文本像素位置。前者会起到美化作用,而后者则完全不行。如果使用@font-face,请记住字体受版权保护,因此共享任何字体都需要合法许可。
PS. Helvetica是一种旧的字体设计。它已经被衍生出很多次,在不同的系统上请求“Helvetica”将产生大量结果。因此,这是一种不能在Web上使用的字体,除非使用@font-face。
字体 开放类型 文本呈现