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

您需要将 OTF 转换为 WOFF：

---

OTF -> WOFF（有效！）

TTF -> OTF -> WOFF（有效！）

TTF -> WOFF（抗锯齿无效，Google Fonts 中的常见错误）

---

1º) 下载OTF font version

1º替代）如果字体是其他字体并且是TTF，则将其转换为OTF https://everythingfonts.com/ttf-to-otf

2º) 将 OTF 转换为 WOFF https://everythingfonts.com/otf-to-woff

---

仅使用 WOFF 而不是 EOT、SVG、WOFF2 等。

Answer 2

只是一个关于处理抗锯齿的不太常见的 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

Answer 3

Cufon 和 Typeface.js 是两个解决方案，它们汇总并清理了本主题中讨论的大量 HTML5、CSS3 和 JS 解决方案。

每个都有一个转换器，允许将字体文件（ttf、otf、wotf）转换为执行您想做的事情的脚本——通过网络传递任何字体，抗锯齿。

在这两者中，我更喜欢 Cufon http://cufon.shoqolate.com/generate/

Answer 4

使用 CSS3，您可以使用 font-smooth 属性，尽管抗锯齿仍将由系统默认值控制。如果您真的需要强制使用干净的抗锯齿，无论操作系统是什么，您都必须使用 sIFR，它会自动将文本替换为 Flash 组件。

Answer 5

另见：http://www.elfboy.com/blog/text-shadow_anti-aliasing/

要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3); 会产生抗锯齿效果。