Html 如何在 CSS 中应用字体抗锯齿效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17864742/
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
How to apply font anti-alias effects in CSS?
提问by Mehar
How can we apply Photoshop-like font anti-aliasing such as crisp, sharp, strong, smooth in CSS?
我们如何在 CSS 中应用类似 Photoshop 的字体抗锯齿，例如清晰、清晰、强烈、平滑？
Are these supported by all browsers?
所有浏览器都支持这些吗？
回答by Gildas.Tambo
here you go Sir :-)
给你，先生:-)
1
1
.myElement{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
2
2
.myElement{
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
回答by Jace Cotton
Short answer: You can't.
简短的回答：你不能。
CSS does not have techniques which affect the rendering of fonts in the browser; only the system can do that.
CSS 没有影响浏览器中字体渲染的技术；只有系统才能做到这一点。
Obviously, text sharpness can easily be achieved with pixel-dense screens, but if you're using a normal PC that's gonna be hard to achieve.
显然，使用像素密集的屏幕可以轻松实现文本清晰度，但如果您使用的是普通 PC，则很难实现。
There are some newer fonts that are smooth but at the sacrifice of it appearing somewhat blurry (look at most of Adobe's fonts, for example). You can also find some smooth-but-blurry-by-design fonts at Google Fonts, however.
有一些较新的字体是平滑的，但牺牲了它看起来有些模糊（例如，看看大多数 Adobe 的字体）。但是，您也可以在Google Fonts 中找到一些平滑但设计模糊的字体。
There are some new CSS3 techniques for font rendering and text effects though the consistency, performance, and reliability of these techniques vary so largely to the point where you generally shouldn't rely on them too much.
有一些用于字体渲染和文本效果的新 CSS3 技术，尽管这些技术的一致性、性能和可靠性差异很大，以至于您通常不应过分依赖它们。
回答by user3267537
Works the best. If you want to use it sitewide, without having to add this syntax to every class or ID, add the following CSS to your css body:
效果最好。如果您想在整个站点范围内使用它，而不必将此语法添加到每个类或 ID，请将以下 CSS 添加到您的 css 正文：
body {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
background: url('./images/background.png');
text-align: left;
margin: auto;
}
