4

我在我的网站上使用两种特殊字体作为标题和副标题。它们在 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 上没有任何区别。

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

4

4 回答 4

10

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

于 2012-07-31T18:19:01.893 回答
0

正如 Kwon 所说，任何浏览器/操作系统都有不同的字体渲染。它甚至取决于您在操作系统级别设置的显示设置（子像素混叠）。

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

于 2012-07-31T18:30:11.533 回答
0

尝试字体是否在 chrome 中模糊。

正文 {-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;}
于 2014-05-31T05:15:49.150 回答
0

当 HTML 容器与其 HTML 内容标记相比大小不一致时，也会出现模糊效果。要解决它，请尝试固定 head 容器的大小，并确保它大于 child。

于 2017-10-13T15:34:20.400 回答