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

Question

我在我的网站上使用两种特殊字体用于标题和副标题。它们在PC的IE、Firefox和Chrome上运行良好。然而，在Mac的Safari和Chrome上，字体看起来加粗且略微模糊。我使用的特定字体是Utopia和Helvetica Neue Condensed Bold。我使用基于otf文件生成的字体套件，使用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上没有任何区别。

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

- Ben

Answer 1

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

- Kwon

---

嗨，Kwon，非常感谢您的回复。代码在Safari上运行良好。不幸的是，Chrome没有改变。我会继续寻找解决Chrome的方法。再次感谢。 - Ben

嗨，Kwon，我错了，它在Chrome上确实可以工作。但是在Mac上的Firefox上无法工作。你有什么建议吗？ - Ben

首先，确保你正在使用重置样式表（如果你还没有的话）。然后，尝试具体设置font-weight（根据你已经设置的值）。如果这个方法不能解决问题，不要太过担心。我相信使用Firefox Mac的用户少于3%，所以你应该为大多数用户设计。 - Kwon

Answer 2

如Kwon所说，每个浏览器/操作系统都有不同的字体渲染方式。它甚至取决于操作系统级别的显示设置（子像素抗锯齿）。

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

- kmiyashiro

---

嗨kmiyashiro，感谢您的回复。似乎自定义字体有点棘手，并不是很直接。 - Ben

Answer 3

尝试在Chrome中检查字体是否模糊。

body {-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;}

- Sinju Angajan

Answer 4

当HTML容器与其HTML内容标记不一致时，可能会出现模糊效果。要解决此问题，请尝试修复头部容器的大小，并确保它比子容器大。

- DevMultiTech