CSS：@font-face 抗锯齿
我对 @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;}
还需要做什么才能让这个最后但烦人的问题消失？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
另请参阅：http://www.elfboy.com/blog/text-shadow_anti-aliasing/
要点是添加
text-shadow: 0 0 1px rgba(0,0,0,0.3);给出抗锯齿的外观。Also see: http://www.elfboy.com/blog/text-shadow_anti-aliasing/
The gist is that adding
text-shadow: 0 0 1px rgba(0,0,0,0.3);gives the appearance of anti-aliasing.对于 CSS3，您可以使用 font-smooth 属性，尽管抗锯齿仍然由系统默认值控制。如果您确实需要强制执行干净的抗锯齿功能，无论操作系统是什么，您都必须使用 sIFR，它会自动用 Flash 组件替换文本。
With CSS3, you can use the font-smooth property, although antialiasing will still be controlled by the system defaults. If you really need to force a clean antialiasing no matter what the OS is, you have to use sIFR which automatically replace the text with a Flash component.
只是关于处理抗锯齿的不那么常见的 CSS 规则的简短说明。
webkit 浏览器的字体渲染会略有不同。一般来说，字体显得更清晰、更细。其他值：
演示页面： http://maxvoltar.com/sandbox/fontsmoothing/
不要忘记https://developer.mozilla.org/en-US/docs /Web/CSS/Reference/Webkit_Extensions
Just a short note about a not so common CSS rule to deal with antialias.
You will have a slight variation in the font rendering for webkit browsers. Generally the font appear more clear and thin. Other values:
A demo page: http://maxvoltar.com/sandbox/fontsmoothing/
Not to forget https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
您需要将 OTF 转换为 WOFF：
OTF -> WOFF（有效！）
TTF -> OTF-> WOFF（有效！）
TTF -> WOFF（无法抗锯齿，这是 Google Fonts 中的常见错误）
1°) 下载 OTF 字体版本
1° 替代）如果字体是其他字体并且是 TTF，请使用 https://everythingfonts.com/ttf-to-otf
2°) 将 OTF 转换为 WOFF https://everythingfonts.com/otf-to-woff
仅使用 WOFF，而不是 EOT、SVG、WOFF2 等。
You need to convert OTF to WOFF:
OTF -> WOFF (Works!)
TTF -> OTF -> WOFF (Works!)
TTF -> WOFF (Doesn't work antialising, common mistake in Google Fonts)
1º) Download the OTF font version
1º alternative) If the font is other and is TTF, convert it to OTF with https://everythingfonts.com/ttf-to-otf
2º) Convert OTF to WOFF https://everythingfonts.com/otf-to-woff
Use only WOFF not EOT, SVG, WOFF2, etc..
Cufon 和 Typeface.js 是两个解决方案，它们聚合并清理了本线程中讨论的大量 HTML5、CSS3 和 JS 解决方案。
每个都有一个转换器，允许将字体文件（ttf、otf、wotf）转换为脚本，以执行您想要执行的操作 - 通过网络提供任何抗锯齿字体。
两者中，我更喜欢 Cufon http://cufon.shoqolate.com/generate/
Cufon and Typeface.js are two solutions that aggregate and sanitize a lot of the HTML5, CSS3 and JS solutions discussed in this thread.
Each has a converter allowing font files (ttf, otf, wotf) to be converted to scripts that do what you're trying to do -- deliver any font over the web, antialiased.
Of the two, I prefer Cufon http://cufon.shoqolate.com/generate/