html - 自定义字体在 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 settings 中调整“大胆”的数量。 .

但是，如果您不想让人们接触他们的操作系统，并且想要一些可以通过 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 中)，因此将其变暗一点可以解决此问题。

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

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

以下是测试的详细信息(上面的文本 block 是从“Hacked”行中截取的:

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