CSS：@font-face 抗锯齿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3451541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: @font-face anti aliasing
提问by Ben Fransen
I'm a bit struggling with the @font-face CSS option. After a lot of reading, trying, retrying I finally came across a website that makes you a ready-to-go package when you upload your font. It's running now but it seems the font doesn't get anti-aliased. While I see this happening at other websites, mine does not render the headings the way I want.
我对 @font-face CSS 选项有点挣扎。经过大量的阅读、尝试、重试，我终于找到了一个网站，当您上传字体时，它可以让您成为一个随时可用的包。它现在正在运行，但字体似乎没有消除锯齿。虽然我在其他网站上看到了这种情况，但我的网站并没有按照我想要的方式呈现标题。
My CSS code:
我的 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;}
What is left to do to make this last, but anoying, issue go away?
还需要做些什么才能使这成为最后，但烦人的问题消失？
采纳答案by Chman
With CSS3, you can use the font-smoothproperty, 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.
使用 CSS3，您可以使用font-smooth属性，尽管抗锯齿仍由系统默认值控制。如果你真的需要强制一个干净的抗锯齿，不管是什么操作系统，你都必须使用 sIFR，它会自动用 Flash 组件替换文本。
回答by user9538
Also see: http://www.elfboy.com/blog/text-shadow_anti-aliasing/
另见：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.
要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3);会产生抗锯齿的外观。
回答by Steve
Just a short note about a not so common CSS rule to deal with antialias.
只是一个关于处理抗锯齿的不太常见的 CSS 规则的简短说明。
-webkit-font-smoothing: antialiased;
You will have a slight variation in the font rendering for webkit browsers. Generally the font appear more clear and thin. Other values:
您将在 webkit 浏览器的字体呈现方面略有不同。一般字体显得更清晰、更细。其他值：
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;
A demo page: http://maxvoltar.com/sandbox/fontsmoothing/
演示页面：http: //maxvoltar.com/sandbox/fontsmoothing/
Not to forget https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
不要忘记https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
回答by lucasgabmoreno
You need to convert OTF to WOFF:
您需要将 OTF 转换为 WOFF：
OTF -> WOFF (Works!)
OTF -> WOFF（有效！）
TTF -> OTF -> WOFF (Works!)
TTF -> OTF -> WOFF（有效！）
TTF -> WOFF (Doesn't work antialising, common mistake in Google Fonts)
TTF -> WOFF（抗锯齿不起作用，谷歌字体中的常见错误）
1o) Download the OTF font version
1o) 下载OTF字体版本
1o alternative) If the font is other and is TTF, convert it to OTF with https://everythingfonts.com/ttf-to-otf
1o 替代）如果字体是其他字体并且是 TTF，请使用https://everythingfonts.com/ttf-to-otf将其转换为 OTF
2o) Convert OTF to WOFF https://everythingfonts.com/otf-to-woff
2o) 将 OTF 转换为 WOFF https://everythingfonts.com/otf-to-woff
Use only WOFF not EOT, SVG, WOFF2, etc..
仅使用 WOFF 而不是 EOT、SVG、WOFF2 等。
回答by Rowan
Cufon and Typeface.js are two solutions that aggregate and sanitize a lot of the HTML5, CSS3 and JS solutions discussed in this thread.
Cufon 和 Typeface.js 是两个解决方案，它们聚合和清理了本线程中讨论的许多 HTML5、CSS3 和 JS 解决方案。
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.
每个都有一个转换器，允许将字体文件（ttf、otf、wotf）转换为执行您想要做的事情的脚本——通过网络提供任何字体，抗锯齿。
Of the two, I prefer Cufon http://cufon.shoqolate.com/generate/
两者中，我更喜欢 Cufon http://cufon.shoqolate.com/generate/
