5

我第一次在我目前正在制作的网站上使用 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');
}

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

谁能想到任何解决方案？

4

3 回答 3

3

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

于 2011-04-20T12:57:23.507 回答
2

也许用这个插件检测带有javascript的浏览器（见os.name）http://jquery.thewikies.com/browser/然后用它来确定你想加载哪个样式表如何使用Javascript加载CSS文件？

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

于 2011-04-20T08:49:44.403 回答
0

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

于 2013-05-02T20:05:31.143 回答