使用 css 强制抗锯齿：这是一个神话吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/761778/
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
Forcing anti-aliasing using css: Is this a myth?
提问by FriendOfFuture
Recently a client has complained about the appearance of a system font in IE6. Basically th issue is that IE6 doesn't support font-smoothing/anti-aliasing (I know you can turn it on in an OS setting or something). But someone threw out this gem:
最近有客户抱怨IE6中出现系统字体。基本上问题是 IE6 不支持字体平滑/抗锯齿（我知道你可以在操作系统设置或其他东西中打开它）。但是有人扔掉了这个宝石：
"You can force font anti-alias in css by using pt instead of px."
“您可以通过使用 pt 而不是 px 在 css 中强制字体抗锯齿。”
I did a quick POC in various browsers and saw no difference. I found one reference to it online, last post on this forum:
我在各种浏览器中做了一个快速的 POC，并没有发现任何区别。我在网上找到了一个参考，在这个论坛上的最后一篇文章：
http://www.webmasterworld.com/css/3280638.htm
http://www.webmasterworld.com/css/3280638.htm
This sounds like the equivalent of a web developer urban myth, my feeling is it's BS. Has anyone ever encountered it?
这听起来相当于一个 Web 开发人员的城市神话，我的感觉是它的 BS。有没有人遇到过？
采纳答案by Chad Birch
No, there's not really any way to control this as a web developer.
不，作为 Web 开发人员，实际上没有任何方法可以控制它。
Small exceptions are that you can do some fake forcing of anti-aliasing by using Flash through sIFR, and some browsers won't anti-alias bitmap/pixel fonts (as they shouldn't, more info: Anti-Aliasing/ Anti-Anti-Aliasing).
小的例外是你可以通过sIFR使用 Flash 来做一些虚假的抗锯齿强制，并且一些浏览器不会抗锯齿位图/像素字体（因为它们不应该，更多信息：Anti-Aliasing/ Anti-Anti -别名）。
Also, as Daniel mentioned, it's ideal to be using emunits for all fonts, see The Incredible Em & Elastic Layouts with CSSfor more information about this.
此外，正如 Daniel 所提到的，em对所有字体使用单位是理想的，请参阅The Incredible Em & Elastic Layouts with CSS以获取更多信息。
回答by Ryan Brodie
Oh yes you can:
哦，是的，您可以：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
Source for Firefox, thanks Justinfor the heads up.
Firefox 的来源，感谢Justin的提醒。
回答by BaronVonKaneHoffen
There's these exciting new properties in CSS3:
CSS3 中有这些令人兴奋的新属性：
font-smooth:always;
-webkit-font-smoothing: antialiased;
Still not done much testing with them myself though, and they almost definitely won't be any good for IE. Could be useful for Chrome on Windows or maybe Firefox though. Last time I checked, they didn't antialias small stuff automatically like they do in OSX.
尽管如此，我自己仍然没有对它们进行太多测试，而且它们几乎肯定不会对 IE 有任何好处。可能对 Windows 上的 Chrome 或 Firefox 有用。上次我检查时，他们没有像在 OSX 中那样自动对小东西进行抗锯齿处理。
UPDATE
更新
These are not supported in IE or Firefox. The font-smooth property is only available in iOS safari as far as I remember
这些在 IE 或 Firefox 中不受支持。font-smooth 属性仅在我记得的 iOS Safari 中可用
回答by biziclop
I found a really awkward solution using the zoom and filter ms-only properties Example (try with no aa, standard and cleartype): http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html
我发现了一个非常尴尬的解决方案使用缩放和过滤器 ms-only 属性示例（尝试不使用 aa、标准和 cleartype）：http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html
How it works:
这个怎么运作：
-zoom up text with zoom:x, x>1
- 用 zoom:x, x>1 放大文本
-apply some blur(s) (or any other filter)
- 应用一些模糊（或任何其他过滤器）
-zoom down with zoom:1/x
-zoom down with zoom:1/x
It's a bit slow, and very! memory-hungry method, and on non-white backgrounds it has some slight dark halo.
它有点慢，而且非常！内存饥饿的方法，并且在非白色背景上它有一些轻微的暗光晕。
CSS:
CSS：
.insane-aa-4b { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur { zoom:1;
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}
HTML:
HTML：
<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
<div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>
You can use this short jQuery to force anti-aliasing, just add the ieaa class to anything:
您可以使用这个简短的 jQuery 来强制抗锯齿，只需将 ieaa 类添加到任何内容：
$(function(){ $('.ieaa').wrap(
'<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><'+'/div><'+'/div><'+'/div>'
); });
回答by Matthew
Adding the following line of CSS works for Chrome, but not Internet Explorer or Firefox.
添加以下 CSS 行适用于 Chrome，但不适用于 Internet Explorer 或 Firefox。
text-shadow: #fff 0px 1px 1px;
text-shadow: #fff 0px 1px 1px;
回答by Salman von Abbas
I disagree with Chad Birch. We canforce anti-aliasing, at least in Chromeusing a simple css trick with the -webkit-text-strokeproperty:-
我不同意乍得·伯奇的观点。我们可以强制抗锯齿，至少在Chrome 中使用带有-webkit-text-stroke属性的简单 css 技巧：-
-webkit-text-stroke: 1px transparent;
回答by scunliffe
I say its a myth.
我说这是一个神话。
The only difference I've found between pt, px, and percent based fonts is in terms of what IE will scale when the Menu > View > Text Size > ?Setting? is changed.
我发现基于 pt、px 和百分比的字体之间的唯一区别在于，当菜单 > 视图 > 文本大小 > 设置？被改变。
IIRC:
国际研究中心：
- the
pxandptbased fonts will NOT scale percentbased fonts scale in IE just fine
- 在
px与pt基于字体不会结垢 percent基于 IE 中的字体缩放就好了
AFAIK:
AFAIK：
- The font anti-aliasing is mostly controlled by the windows setting for
"ClearType"or in the case of IE7/IE8 the IE-specific setting forClearType.
- 字体抗锯齿主要由 Windows 设置控制，
"ClearType"或者在 IE7/IE8 的情况下是ClearType.
回答by Deniz Dogan
I think you got it a bit wrong. Someone in the thread you pasted says that you can stopanti-aliasing by using pxinstead of pt, not that you can forceit by using the latter. I'm a bit sceptical to both of the claims though...
我想你弄错了。您粘贴的线程中有人说您可以通过使用代替来停止抗锯齿，px而pt不是您可以通过使用后者来强制它。不过，我对这两种说法都有些怀疑......
回答by Matt
The px to pt fix worked for me on a site that uses a font from Google Web Fonts. On Win7 - IE8 it correctly fixed the lack of anti-alias rendering.
px to pt 修复在一个使用 Google Web Fonts 字体的网站上对我有用。在 Win7 - IE8 上，它正确修复了缺乏抗锯齿渲染的问题。
回答by Jason Foglia
Here's a nice way to achieve anti-aliasing:
这是实现抗锯齿的好方法：
text-shadow: 0 0 1px rgba(0,0,0,0.3);
