@ font-face在Mac和Safari上显示模糊的字体 [英] @font-face fonts showing blurred on Mac in Safari and Chrome

问题描述

我在我的网站上使用两种特殊字体作为标题和字幕。他们在工作正常在一个PC在IE，Firefox和Chrome。但是，在Safari和Chrome的Mac上，字体显得有些粗糙，有点模糊。我使用的特定字体是Utopia和Helvetica Neue Condensed Bold。我已经生成的字体套件使用基于otf文件的字体松鼠。我使用的CSS生成的字体松鼠。您可以在 http://shapecast.benmango.co.uk 上查看该网站。我也有屏幕截图比较不同的浏览器中的Mac和PC的结果：

I'm using two special fonts on my website for headings and subtitles. They are working fine on a PC in IE, Firefox and Chrome. However, on a Mac in Safari and Chrome the fonts appear emboldened and slightly blurred. The particular fonts I am using are Utopia and Helvetica Neue Condensed Bold. I have generated the font kits using font squirrel based on otf files. I am using the CSS generated by font squirrel. You can see the website at http://shapecast.benmango.co.uk. I also have screenshots comparing the results in the different browsers for Mac and PC at:

我用于CSS的代码是：

The code I'm using for the CSS is:

@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行移动到顶部，但这没有任何帮助。

I have been working on this problem for a few days now and don't seem to be getting anywhere. I did get an improvement when I changed the font weight from normal to bold for the Helvetica Neue bold typeface. I also tried moving the SVG line to the top, but that doesn't help.

奇怪的是，在Mac上的Chrome中，当三个主面板之一悬停在主标题下方时，字体变得更清晰，应该。

Strangely, in Chrome on a Mac, when one of the three main panels are hovered over (under the main header), the font becomes much clearer and it looks as it should. It doesn't make any difference though, on Safari.

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

I would be grateful if anyone could offer any advice.

推荐答案

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

All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.

这篇关于@ font-face在Mac和Safari上显示模糊的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！