自定义字体在 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

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

当对文本应用抗锯齿时，文本渲染引擎会产生不同的粗细。当使用默认的子像素抗锯齿时，OSX 默认会生成更粗的字形。“大胆”的程度可以在OSX 设置中进行调整。

但是，如果您不想让人们接触他们的操作系统，并且想要一些可以通过 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;在左侧产生细阴影。这可以确保字形不会太细。我发现使用文本阴影颜色#fff会使字形在某些浏览器中（例如在 Win FF 中）过于粗体，因此将其设置得更暗可以解决此问题。

虽然文本阴影的这种“加粗”主要是为了修复 OSX 中过薄的灰度抗锯齿字形，但它在 Windows 中也能产生更好的效果。然而在 Windows 和 Linux 中*-font-smoothing没有效果，因此使用默认的子像素抗锯齿。

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

以下是测试的详细信息（上面的文本块是从“Hacked”行中截取的：

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

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 在这种规范化方面有多好。如果您测试过，请报告您的发现:)