我在我的网站上使用两种特殊字体作为标题和副标题。它们在 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 上没有任何区别。
如果有人可以提供任何建议,我将不胜感激。