自定义字体在 Mac OS X 上看起来不同（更高）

Question

我正在使用自定义字体。该字体在我的 Windows PC 上运行良好，但在我的 Mac (Yosemite OSX) 上运行不正常。正如您在图片中看到的，Mac 上的字体比 Windows 上的字体稍大。所有浏览器都一样。

我在图片中使用了border-top...你可以清楚地看到问题所在。整个网站的字体比正常字体高了一点，我该如何解决？

正常字体 windows/mac

自定义字体 windows

自定义字体 mac

CSS-代码:

@font-face {
    font-family: "Lovelo Black";
    src: url('../fonts/lovelo_black.otf') format('opentype');
    src: url('../fonts/lovelo_black.ttf') format('truetype');
    src: url('../fonts/lovelo_black.eot') format('eot');
    src: url('../fonts/lovelo_black.svg') format('svg');
    src: url('../fonts/lovelo_black.woff') format('woff');
}

Answer 1

不幸的是，当涉及到嵌入字体时，它是 up to the OS to decide how to render it, and the only real way around it is to have different styles handling rendering changes for each OS. That being said you could try to find a comparable font in the Google Fonts 库，它们似乎同样交叉 OS。我从来没有遇到过这个问题。

如果您想检测最终用户从哪个 OS 访问您的网站，您可以使用一些 javascript/jQuery 来检测。然后通过一些黑客攻击，您可以将样式应用于每个 OS.

Javascript 和 jQuery

if (navigator.userAgent.indexOf('Mac OS X') != -1) {
    $("body").addClass("mac");
} else {
    $("body").addClass("pc");
}

CSS

.mac h1 {
    font-family: "Lovelo Black";
    //your mac specific styles
}

.pc h1 {
    font-family: "Lovelo Black";
    //your windows specific styles
}

基本上，在您的 CSS 中，您需要在所有样式（包括字体）前加上您应用于 body 的 class。

Answer 2

http://www.fontsquirrel.com/tools/webfont-generator是一种可能。

有一个复选框：渲染：修复垂直指标（跨浏览器标准化）：

至少当复选框被选中或未被选中时，在生成的 ttf 文件中生成不同的垂直指标。

修复垂直指标 未选中（在 FontCreator 中检查时）：

修复垂直指标 选中：

下载的工具包也有 ccs 文件，但似乎没有特定于浏览器的 hack。我假设这可以通过修复指标在字体方面处理。

为了验证我的假设，我使用了 Typekit.net 中的字体并将生成的 css 文件（Typekit 字体在 css 中使用 base64 编码）与 OSX Chrome 和 Win Chrome 以及 base64 编码的字体文件是相同的。这似乎证实了可以通过跨浏览器的方式修复字体指标。

所以我认为建议生成特定于浏览器的 css 修复程序的公认答案是没有必要的。

但是我不知道 FontSquirrel 在这个规范化方面有多好。如果您对其进行了测试，请报告您的发现:)

Answer 3

问题分为两部分。因为这与问题的第一部分（垂直指标不一致）无关，所以我添加了一个关于问题另一部分的新答案。

文本渲染引擎在对文本应用抗锯齿时产生不同的厚度。 OS当使用默认的子像素抗锯齿时，X 默认使字形变粗。 "boldness" 的数量可以在 OSX settings 中调整。

但是如果你不想让人们触摸他们的 OS 并且想要一些可以由 javascript/css 完成的事情，那么有一个选择。

当抗锯齿类型设置为灰度时，

OSX 呈现更细的字形。 Safari 和 Chrome 以及 Opera 使用 -webkit-font-smoothing: antialiased; 和 Firefox -moz-osx-font-smoothing: grayscale;.

但这可能还不够，因为深色背景中的浅色文本会使字形太细。为了使它们更大胆一些，您可以使用特定的 text-shadow-hack (codepen):

#div1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: #999 0.1px 0px 0px, #999 -0.1px 0px 0px;

  background-color: black;
  width: 100px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  font-family: 'Open Sans';
  font-size: 16px;
}

text-shadow 中的第一部分 #999 0.1px 0px 0px 在右侧形成细阴影，第二部分 #999 -0.1px 0px 0px; 在左侧。这确保字形不会太细。我发现使用 text-shadow color #fff 会使字形在某些浏览器中过于粗体（例如在 Win FF 中），因此将其变暗一点可以解决此问题。

虽然这个 "boldening" by text-shadow 主要是为了修复 OSX 中太细的灰度抗锯齿字形，但它在 Windows 中也有更好的效果。在 Windows 和 Linux 中，但是 *-font-smoothing 没有效果，所以使用默认的子像素抗锯齿。

这里可以看到9种不同浏览器的实际效果。对我来说，这产生了相当相似的大胆：

这是测试的详细信息（上面的文本块是从 "Hacked" 行截取的：

注意：此技术仅适用于深色背景中的浅色文本，最好是按钮或类似内容。在大文本块中，您必须考虑文本的易读性，通常亚像素抗锯齿可提供更好的易读性。如果颜色不是黑色和白色，您可能需要调整文本阴影颜色。在大文本块中使用文本阴影会影响渲染时间。

Answer 4

对于您的原始问题 - 在 Mac 和 Windows 上看起来不同（更高） - 我遇到了完全相同的问题。我建议您尝试从其他来源下载您的字体文件（.ttf 或 .oft 等）。我最初通过使用 Javascript 来检测用户代理是 Mac 还是 Windows 来解决这个问题。如果它是 Mac，我会添加额外的自定义样式来修复字体由于它在 Mac 上而出现的方式。但是我不喜欢这个解决方案，太麻烦了。相反，我尝试了不同的来源（和不同的文件类型——例如：otf vs ttf），问题就消失了。

自定义字体在 Mac OS X 上看起来不同（更高）

custom font looks different (higher) on Mac OS X

html

css

fonts

font-face