哦，是的，你可以：

Question

最近有一位客户抱怨IE6中出现了系统字体。基本上问题是IE6不支持字体平滑/抗锯齿（我知道你可以在OS设置或其他东西中打开它）。但有人抛弃了这个宝石：

“您可以使用pt而不是px强制css中的字体反别名。”

我在各种浏览器中做了一个快速的POC，没有看到任何区别。我在网上发现了一个对它的引用，这篇论坛的最后一篇文章：

http://www.webmasterworld.com/css/3280638.htm

这听起来像是一个网络开发者城市神话，我觉得它是BS。有没有人见过它？

Answer 1

哦，是的，你可以：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

Source for Firefox，感谢Justin提醒。

Answer 2

CSS3中有这些令人兴奋的新属性：

font-smooth:always;
-webkit-font-smoothing: antialiased;

尽管我自己还没有做过多少测试，但他们几乎肯定不会对IE有任何好处。可能对Windows上的Chrome或Firefox有用。上次我检查时，他们并没有像在OSX中那样自动对抗小东西。

<强>更新

IE或Firefox不支持这些功能。字体平滑属性仅在我记得的iOS Safari中可用

Answer 3

不，作为网络开发者，没有任何方法可以控制它。

小的例外是你可以通过sIFR使用Flash来做一些伪造的抗锯齿功能，而且有些浏览器不会对位图/像素字体进行反别名（因为它们不应该，更多信息： Anti-Aliasing / Anti-Anti-Aliasing）。

另外，正如Daniel所说，对所有字体使用em个单位是理想的，有关详细信息，请参阅The Incredible Em & Elastic Layouts with CSS。

Answer 4

我使用缩放和过滤ms-only属性找到了一个非常尴尬的解决方案示例（尝试没有aa，标准和cleartype）： http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

工作原理：

-zoom up zoom with zoom：x，x＆gt; 1

- 应用一些模糊（或任何其他过滤器）

-zoom down zoom：1 / x

它有点慢，非常！记忆力很大的方法，在非白色背景上它有一些轻微的黑暗光环。

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：

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

你可以使用这个简短的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>'
); });

Answer 5

添加以下CSS系列适用于Chrome，但不支持Internet Explorer或Firefox。

text-shadow: #fff 0px 1px 1px;

Answer 6

我不同意Chad Birch。我们可以强制消除锯齿，至少在 Chrome 中使用-webkit-text-stroke属性的简单css技巧： -

-webkit-text-stroke: 1px transparent;

Answer 7

我说这是一个神话。

我在pt，px和基于百分比的字体之间找到的唯一区别是，当菜单＆gt; IE将按比例缩放。查看＆gt;文字大小＆gt; ？设置？改变了。

IIRC：

基于px和pt的字体不会缩放
percent基于IE的字体缩放就好了

AFAIK：

字体抗锯齿主要由"ClearType"的窗口设置控制，或者在IE7 / IE8的情况下由ClearType的IE特定设置控制。

Answer 8

我觉得你有点不对劲。您粘贴的主题中有人说您可以使用px代替pt 停止消除锯齿，而不是强制它使用后者。我对这两个说法都有点怀疑......

Answer 9

px to pt fix在使用Google Web Fonts字体的网站上为我工作。在Win7 - IE8上，它正确地修复了缺少抗别名渲染的问题。

Answer 10

使用99％的不透明度设置（通过DXTransform过滤器）实际上会强制Internet Explorer关闭ClearType，至少在版本7中是这样。Source

Answer 11

我怀疑无论如何都迫使浏览器做任何事情。这取决于系统配置，使用的字体，浏览器设置等。它听起来也像BS一样。

作为注释，始终使用相对尺寸而不是PX。

Answer 12

似乎可以在http://www.elfboy.com/blog/text-shadow_anti-aliasing/找到最详尽的解决方案。适用于Firefox和Chrome，虽然Firefox不如Chrome有效。

Answer 13

作为旁注，Gecko和WebKit支持

text-rendering

属性。

Answer 14

不是纯CSS但是本机支持的方法没有任何字体替换黑客：只需将您的字体转换为SVG并将其放置在@ font-face顺序中更高（在WOFF或TTF之前）。瞧！字体现在很流畅，因为它们不再被视为字体，而是SVG形状，可以很好地平滑。

注意：我注意到SVG的重量可能超过WOFF或TTF。

Answer 15

这是一种实现抗锯齿的好方法：

text-shadow: 0 0 1px rgba(0,0,0,0.3);

Answer 16

我找到了修复......

.text {
            font-size: 15px;  /* for firefox */
            *font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
            font-weight: bold; /* needed, don't know why! */
        }

使用css强制抗锯齿：这是一个神话吗？

16 个答案:

哦，是的，你可以：