Webfonts在Windows，Mac和Linux上的呈现方式不同

Question

我第一次在我正在制作的网站上使用webfonts，我注意到Windows和Linux上的字体边界框似乎不同。 Mac（在Linux和Mac上也是如此）。这不依赖于浏览器，因为所有操作系统上的相同版本的Chrome和Firefox都存在这些差异。基本上，在Windows上，角色顶部有额外的空间，而在Linux和Mac上，角色的边界框更接近角色的实际顶部（例如，变音符号在框外）。这自然会改变位置，边距等行为。

目前字体定义如下：

@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'); 
} 

因此，例如，我无法将文章的装饰初始上限垂直对齐到文章的第一行，因为它在不同操作系统上的位置不同。

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

Answer 1

前几天我自己正在研究这个问题，然后我来到这个网站，解释发生了什么。 http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/我从文章中得到的结论是操作系统以不同的方式呈现字体，唯一真正的修复显然是按摩字体本身以使它们处理不同的OS渲染样式。不幸的是，编辑实际的字体可能不是我猜的选择。

Answer 2

也许使用带有此插件的javascript检测浏览器（请参阅os.name）http://jquery.thewikies.com/browser/，然后使用它来确定要加载哪个样式表How to load up CSS files using Javascript?

字体在操作系统之间真的很奇怪，渲染不一致并不让我感到惊讶。

Answer 3

我刚刚发现-webkit-font-smoothing: antialiased; - 它似乎在OSX上为Safari和Chrome做得很好。