CSS：@font-face抗锯齿

Question

我有点纠结于@font-face CSS选项。经过大量的阅读，尝试，重试，我终于发现了一个网站，当你上传你的字体时，它会让你成为一个随时可用的包。它现在正在运行，但字体似乎没有抗锯齿。虽然我在其他网站上看到了这种情况，但我的网站并没有以我想要的方式呈现标题。

我的CSS代码：

@font-face {
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;}

还有什么要做的，才能让这个问题最终消失？

Answer 1

对于CSS3，您可以使用font-smooth属性，尽管抗锯齿仍将由系统默认设置控制。如果你真的需要强制一个干净的抗锯齿，不管操作系统是什么，你必须使用sIFR，它会自动将文本替换为闪存组件。

Answer 2

另请参阅：http://www.elfboy.com/blog/text-shadow_anti-aliasing/

要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3);会给人带来抗锯齿的效果。

Answer 3

简单介绍一下处理抗锯齿的不太常见的CSS规则。

-webkit-font-smoothing: antialiased;

webkit浏览器的字体呈现会有一些细微的变化。一般情况下，字体看起来更清晰、更细。其他值：

-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;

演示页面：http://maxvoltar.com/sandbox/fontsmoothing/

不要忘记https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions