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;}

要让这个最后的，但令人烦恼的问题消失，还需要做什么？

- Ben Fransen

Answer 1

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

要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3);可以呈现出抗锯齿的外观。

- user9538

---

不错！使用白色文本，您最终会得到一个发光的效果，但这很酷。 - GeekyMonkey

啊哈哈！终于抓住你了，Windows先生！（其实并没有，但有点像，这已经足够了。） - its_me

Answer 2

CSS3 中，你可以使用 font-smooth 属性，尽管字体平滑还是会受到系统默认值的控制。如果你确实需要无论操作系统如何都强制使用干净的字体平滑技术，你需要使用 sIFR，它会自动用 Flash 组件替换文本。

- Chman

---

谢谢您的回答，我现在正在尝试使用sIFR。 - Ben Fransen

我可以推荐使用Cufón代替sIFR，这样您就不需要Flash来查看字体（我考虑了所有的Flashblock用户和iPhone / iPad用户，除了那些厌烦Flash的人）：http://cufon.shoqolate.com/generate/ - Jonas

font-smooth属性已被移出CSS字体规范，目前没有被列入标准轨迹。一些移动浏览器支持它。 Webkit支持类似的功能。 - commonpike

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

提示：以上内容涉及IT技术。

- Steve

Answer 4

您需要将OTF转换为WOFF：

---

OTF -> WOFF（可行！）

TTF -> OTF -> WOFF（可行！）

TTF -> WOFF（不可行，会导致反锯齿问题，这是Google字体中常见的错误）

---

1º）下载OTF字体版本

1º替代方案）如果字体是TTF格式，请使用https://everythingfonts.com/ttf-to-otf将其转换为OTF格式

2º）使用https://everythingfonts.com/otf-to-woff将OTF转换为WOFF格式

---

只使用WOFF格式而不是EOT、SVG、WOFF2等。

- lucasgabmoreno

Answer 5

Cufon和Typeface.js是两个解决方案，它们聚合并清理了本主题中讨论的许多HTML5、CSS3和JS解决方案。

每个解决方案都有一个转换器，允许将字体文件（ttf、otf、wotf）转换为执行您要执行的操作的脚本——在Web上传递任何字体，抗锯齿。

在这两个解决方案中，我更喜欢Cufon http://cufon.shoqolate.com/generate/

- Rowan