@字体面的字体Safari和Chrome

显示模糊在Mac上我使用我的网站标题和字幕两个特殊字体。他们在IE，Firefox和Chrome上的PC上运行良好。但是，在Safari和Chrome的Mac上，字体会显得底气和略显模糊。我使用的特定字体是Utopia和Helvetica Neue Condensed Bold。我使用基于otf文件的字体松鼠生成字体工具包。我正在使用字体松鼠生成的CSS。你可以看到网站http://shapecast.benmango.co.uk。我也有在截图中比较适用于Mac的浏览器不同的结果和PC： enter image description here @字体面的字体Safari和Chrome

的代码我使用的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行移动到顶端，但这没有帮助。

奇怪的是，在Chrome浏览器Mac上，当三个主要的面板之一的上空盘旋（主标题下），字体变得更清晰，它看起来它应该。它在Safari上没有任何区别。

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

来源

2012-07-31 Ben

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

来源

2012-07-31 18:19:01 Kwon

喜权，非常感谢你的回复。该代码适用于Safari。不幸的是Chrome并没有改变。我将继续查看是否可以找到Chrome的修复程序。再次感谢。 – Ben 2012-08-02 15:48:48

嗨Kwon，我错了，它在Chrome中工作。但是，它不适用于Mac上的Firefox。你有什么建议吗？ – Ben 2012-08-03 07:41:28

首先，确保您使用重置样式表，如果您还没有。然后，尝试设置'font-weight'专门（无论你设置为什么）。如果黑客无法解决，不要过分强调它。我相信Firefox Mac用户不到3％，而你想为大多数人设计。 – Kwon 2012-08-03 17:32:41

正如权说，以往浏览器/操作系统有不同的字体渲染。它甚至取决于您在OS级别的显示设置设置为（子像素别名）。

更令人沮丧的，WebKit的/镀铬有一些字体面显示bug以及，如用文字阴影任何文本：http://code.google.com/p/chromium/issues/detail?id=23440

来源

2012-07-31 18:30:11 kmiyashiro

嗨，吉代，感谢您的回复。它看起来像自定义字体是一个雷区，并不真正简单。 – Ben 2012-08-02 15:51:31

尝试，如果字体铬模糊。

 
body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;} 

or 

a,p,span,h1,h2,h3,h4,h5 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}

来源

2014-05-31 05:15:49

当HTML容器与HTML内容标记相比尺寸不一致时，可能会出现模糊效果。要解决它，请尝试修复头容器的大小，并确保它比儿童大。

来源

2017-10-13 15:34:20 DevMultiTech

@字体面的字体Safari和Chrome

回答

相关问题