Webfonts 在 Windows、Mac 和 Linux 上呈现不同

Posted 2023-03-06

【中文标题】Webfonts 在 Windows、Mac 和 Linux 上呈现不同

【英文标题】：Webfonts rendering differently on Windows, Mac and Linux

【发布时间】：2011-08-09 05:41:37

【问题描述】：

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

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

谁能想到任何解决方案？

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

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