@font-face 字体在 Mac 上的 Safari 和 Chrome 中显示模糊答案

【问题标题】：@font-face fonts showing blurred on Mac in Safari and Chrome@font-face 字体在 Mac 上的 Safari 和 Chrome 中显示模糊
【发布时间】：2012-07-31 16:55:26
【问题描述】：

我在我的网站上使用两种特殊字体作为标题和副标题。它们在 IE、Firefox 和 Chrome 的 PC 上运行良好。但是，在 Mac 上的 Safari 和 Chrome 中，字体显得更加大胆且略微模糊。我使用的特殊字体是 Utopia 和 Helvetica Neue Condensed Bold。我已经使用基于 otf 文件的字体松鼠生成了字体工具包。我正在使用字体松鼠生成的 CSS。您可以在http://shapecast.benmango.co.uk 上查看该网站。我还有截图比较了 Mac 和 PC 的不同浏览器中的结果：

我用于 CSS 的代码是：

@font-face {
    font-family: 'Utopia';
    src: url('/fonts/utopiastd-regular-webfont.eot');
    src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
         url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
         url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
}

@font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
    }

@font-face {
    font-family: 'HelveticaNeueLTStdCnBold';
    src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
         url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-variant:normal;
}

我已经解决这个问题几天了，但似乎没有任何进展。当我将 Helvetica Neue 粗体字体的字体粗细从正常更改为粗体时，我确实得到了改进。我还尝试将 SVG 线移到顶部，但这无济于事。

奇怪的是，在 Mac 上的 Chrome 中，当三个主要面板之一悬停在上方（在主标题下方）时，字体会变得更加清晰，看起来也应该如此。不过，在 Safari 上并没有什么区别。

如果有人能提供任何建议，我将不胜感激。

【问题讨论】：

标签： css cross-browser font-face

【解决方案1】：

所有浏览器都以不同的方式呈现字体。为 Safari 尝试-webkit-font-smoothing: antialiased;，看看它是否有所作为。另外，请尝试使用相对长度单位。

【讨论】：

您好权，非常感谢您的回复。该代码适用于 Safari。不幸的是，Chrome 没有改变。我将继续寻找是否可以找到 Chrome 的修复程序。再次感谢。
您好 Kwon，我错了，它在 Chrome 中确实有效。但是它不适用于 Mac 上的 Firefox。您对此有什么建议吗？
首先，如果您还没有使用重置样式表，请确保您使用的是重置样式表。然后，尝试专门设置font-weight（设置为您设置的任何内容）。如果 hack 没有解决，不要过分强调它。我相信 Firefox Mac 用户不到 3%，你想为大多数人设计。

【解决方案2】：

正如 Kwon 所说，任何浏览器/操作系统都有不同的字体渲染。它甚至取决于您在操作系统级别设置的显示设置（亚像素混叠）。

更令人沮丧的是，webkit/chrome 也有一些字体渲染错误，例如任何带有 text-shadow 的文本：http://code.google.com/p/chromium/issues/detail?id=23440

【讨论】：

您好，kmiyashiro，感谢您的回复。看起来自定义字体有点雷区，而且不是很简单。

【解决方案3】：

如果字体在 chrome 中模糊，请尝试。

正文 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;} 或者 a,p,span,h1,h2,h3,h4,h5 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}

【讨论】：

【解决方案4】：

当 HTML 容器与其 HTML 内容标记相比大小不一致时，也会出现模糊效果。要解决这个问题，请尝试固定 head 容器的大小，并确保它大于 child。

【讨论】：