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

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 http://shapecast.benmango.co.uk/. I also have screenshots comparing the results in the different browsers for Mac and PC at:

我用于 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 上这没有任何区别。

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

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