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') 格式('eot'),
        url('fonts/franklingothichanddemi-webfont.woff') 格式('woff'),
        url('fonts/franklingothichanddemi-webfont.ttf') 格式('truetype'),
        url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') 格式('svg'); 
} 

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

任何人都可以想到任何解决方案吗？

Answer 1

前几天我自己也在研究这个问题，我来到这个网站并解释了正在发生的事情。 http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/我从这篇文章中得到的结论是，操作系统以不同的方式呈现字体，唯一真正的解决办法显然是调整字体本身使它们能够处理不同的操作系统渲染风格。不幸的是，我猜测编辑实际字体可能不是一个选择。