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

Question

我在我的网站上使用两种特殊字体作为标题和副标题。它们在 PC 上的 IE、Firefox 和 Chrome 中运行良好。但是，在 Mac 上的 Safari 和 Chrome 中，字体显得粗壮且略微模糊。我使用的特定字体是 Utopia 和 Helvetica Neue Condensed Bold。我已经使用基于 otf 文件的 font squirrel 生成了字体包。我正在使用 font squirrel 生成的 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 上这没有任何区别。

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

Answer 1

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