@ font-face提供超重的字体重量和/或糟糕的抗锯齿效果

时间:2012-06-25 06:46:49

标签: css font-face antialiasing

我找到了一个我喜欢的开放字体(Crete Round)并在Photoshop中设计了一些屏幕。当设置CSS时,我尝试使用Google字体和fontsquirrel.com的可下载“套件”(带有四种不同类型字体和现成样式表的zip文件),但两者都给了我奇怪的结果在Mac上

Photoshop - 我希望它看起来像:

enter image description here

Yuck - 使用fontsquirrel.com上的@ font-face工具包在Mac上安装Chrome(和Safari):

enter image description here

Mac上的Chrome(和Safari)使用Google字体(基本相同):

enter image description here

GOOD - Windows上的-Crome(fontsquirrel):

enter image description here

- 哈克。我发现任何不透明度(文本颜色alpha)小于1.0,Chrome给了我很好的结果(但Safari仍然很糟糕。)

Mac上的Chrome使用fontsquirrel,opacity:0.999;

enter image description here

有没有人对这里发生的事情或我可能做错的事情有任何想法?

2 个答案:

答案 0 :(得分:1)

我认为你做错了什么。除了使用图像而不是文字,风格绝对至关重要,我也认为没有办法解决它。

我发现THIS LINK讨论了在不同操作系统上渲染引擎(也考虑了不同的浏览器)。

我希望这有帮助!

答案 1 :(得分:1)

尝试

html { -webkit-font-smoothing: antialiased; }