Web字体在Windows、Mac和Linux上的渲染不同

Question

我第一次在正在制作的网站中使用Web字体，我发现字体的包围框在Windows和Linux＆Mac上似乎不同（在Linux和Mac上相同）。这不取决于浏览器，因为所有操作系统上的Chrome和Firefox版本都有这些差异。基本上，在Windows上，字符顶部有额外的空间，而在Linux和Mac上，字符的包围框更接近实际字符的顶部（例如umlauts在框外）。这自然会改变位置、边距等的行为。

目前，字体定义如下：

@font-face { font-family: "FranklinGothicHand"; 
    src: url('fonts/franklingothichanddemi-webfont.eot'); 
    src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
        url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
        url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
        url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg'); 
} 

正因为如此，例如，我无法正确地垂直对齐文章的装饰性首字母与文章的第一行，因为它在不同的操作系统上的位置不同。

有人能想到任何解决方案吗？

- teel

Answer 1

我前几天也在研究这个问题，偶然发现了这个网站，里面详细解释了发生的情况：http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/。从文章中我得出的结论是，操作系统对字体的呈现方式不同，唯一真正的解决方法似乎是调整字体本身以适应不同的操作系统呈现风格。不幸的是，编辑实际的字体可能不是一个可选项，我猜测。

- andykrynn

Answer 2

可以使用此插件（请参见os.name）http://jquery.thewikies.com/browser/检测浏览器，然后根据此确定要加载哪个样式表如何使用JavaScript加载CSS文件？

由于操作系统之间的字体非常奇怪，因此渲染不一致并不让我感到惊讶。

- Jarrett Widman

Answer 3

我刚刚发现了-webkit-font-smoothing: antialiased; -- 它似乎对OSX上的Safari和Chrome有很好的效果。

- Chuck Le Butt