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

【问题标题】：custom font looks different (higher) on Mac OS X自定义字体在 Mac OS X 上看起来不同（更高）
【发布时间】：2015-12-07 10:12:41
【问题描述】：

我正在使用自定义字体。该字体在我的 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');
}

【问题讨论】：

标签： html css fonts font-face

【解决方案1】：

不幸的是，当涉及到嵌入式字体时，它是up to the OS 来决定如何呈现它，而唯一真正的解决方法是让不同的样式处理每个操作系统的呈现变化。话虽这么说，您可以尝试在Google Fonts 库中找到类似的字体，它们似乎同样是跨操作系统的。我从来没有和他们有过这个问题。

如果您想检测最终用户从哪个操作系统访问您的网站，您可以使用一些 javascript/jQuery 来检测这一点。然后通过一些技巧，您可以将样式应用于每个操作系统。

带有 jQuery 的 JavaScript

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 的类的字体。

【讨论】：

感谢您的回答！我怎样才能为 osx 设置低一点的字体？
非常感谢您的回答！我试试看

【解决方案2】：

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

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

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

Fix Vertical Metrics 未选中（在 FontCreator 中检查时）：

修复垂直指标勾选：

下载的套件也有 ccs 文件，但似乎没有特定于浏览器的 hack。我认为这可以通过修复指标在字体方面进行处理。

为了检查我的假设，我使用了来自 Typekit.net 的字体，并将生成的 css 文件（Typekit 字体在 css 中以 base64 编码）与 OSX Chrome 和 Win Chrome 进行比较，并且 base64 编码的字体文件是相同的。这似乎证实了以跨浏览器的方式修复字体指标是可能的。

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

但是我不知道 FontSquirrel 在这种规范化方面有多好。如果你测试它，请报告你的发现:)

【讨论】：

感谢您的回答！我会先试试这个，然后告诉你:)
结果：“修复垂直指标”选项有帮助！字体的高度现在在 windows 和 mac 上看起来很完美。但是，字体看起来粗细取决于浏览器，有什么想法@asdf？
这可能是由于 OS:s 之间的别名方法不同。 OSX 渲染更粗的字形。最简单的解决方法是使用 -webkit-font-smoothing：例如。 files.christophzillgens.com/webkit-font-smoothing.html。它只影响 OSX。 subpixel-antialiased 是默认值。你可以试试antialiased，如果它能让 OSX 渲染更轻的字形。仅在标题中使用抗锯齿，并在大文本块中将其保留为默认值，以确保最大的文本可读性。
另一种方法是尝试加粗 windows 字体，例如。使用 1px 文本阴影，但这不是非常推荐的解决方案。对我来说，Windows 渲染的厚度似乎不错，你应该尝试一些方法让 OSX 渲染更轻。
在 FontSquirrel 中还有一个 Truetype Hinting 选项。它影响轮廓与像素网格的拟合。您可以阅读更多内容，例如。在smashingmagazine.com/2009/11/…。在 FontSquirrel 中尝试不同的设置（Font Squirrel、Keep Existing、TTFAutohint），如果它产生了你想要的结果。

【解决方案3】：

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

文本渲染引擎在对文本应用抗锯齿时会产生不同的粗细。当使用默认的子像素抗锯齿时，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; 在左边。这样可以确保字形不会太薄。我发现在某些浏览器中使用文本阴影颜色#fff 会使字形过于粗体（例如在 Win FF 中），所以让它变暗一些来解决这个问题。

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：