IE8：禁用清除类型？答案

【问题标题】：IE8: Disable cleartype?IE8：禁用清除类型？
【发布时间】：2010-11-05 02:46:56
【问题描述】：

对于IE7，可以添加

filter: none;

到 body css 以通过 CSS 禁用字体的 cleartype。我不喜欢它给人的模糊外观，而且它在浏览器中并不是真正一致的。 IE; Firefox 和 IE6 的显示方式不同。

然而，IE8 似乎忽略了 css 选项，即使使用以下命令强制浏览器进入 IE7 兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

TL;DR：如何通过 CSS 在 IE8 中禁用 clear-type 字体？

【问题讨论】：

致反对者：我的问题不是禁用 cleartype 是否是个好主意——你可以让我自己考虑。问题是如何做到这一点。
你喜欢浏览器被劫持吗？什么时候调整窗口大小？当您收到弹出窗口的垃圾邮件时？地址栏什么时候禁用？这是一个典型的例子，当你显然没有权利或根本不需要搞砸它时，你会认为你知道得更清楚。反过来考虑 - 如果网站强制启用 cleartype 会怎样？
我学到的最重要的一课是“客户并不总是正确的”。有一半的时间，他们甚至不知道自己想要什么。如果客户要求您实施漏洞利用以在访问者的 PC 上安装间谍软件，您会这样做吗？只需解释它是不可能的，甚至是不可取的。
如果我想关闭清除类型，我会关闭它。作为用户，这不是我希望网站代表我做出的决定。
@Joel，那么幸运的是，这不是关于您作为用户想要什么的问题。

标签： css internet-explorer-8 cleartype

【解决方案1】：

据我回忆，Internet Explorer 7+ 会在元素上设置过滤器时禁用 ClearType

#target {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}

_{另外，请考虑许多用户可能会发现禁用 ClearType 很烦人。谨慎使用！}

【讨论】：

完美。它是否也适用于 -ms-filter:none;过滤器：无；也？因为这可能更正确。
啊，太糟糕了。照原样，标记看起来有点难看。此外，还添加了警告以阻止投票者:)
正如预测的那样，这在 IE 9 中停止工作。万岁。少了一位网络开发人员，他试图将自己的方式强加给他的读者。
@joey 或... drumroll 像素字体！我喜欢我的像素字体清脆，谢谢，我希望我的用户能看到它！
Maurycy：如果您将像素字体设计为轮廓字体而没有适当的提示，那么无论如何，您应该得到模糊显示。

【解决方案2】：

你不能。 ClearType 是浏览器上的用户设置。任何会为某些元素禁用它的 CSS 很可能是一个错误，而不是一个功能（我注意到它会被一些动态生成的或动画元素禁用）并且不应依赖。

无论您在这方面的偏好是什么，都可能不是看到您网站的用户的偏好。那么为什么要打扰呢？不喜欢 ClearType 的人可能已经禁用了它。

注意： 它与过滤器一起使用的原因是过滤器不是由浏览器呈现，而是由其他东西呈现（可能是 DirectX，考虑到那里的“DX”。我仍然认为副作用，而不是功能）。

注 2： 正如预期的那样，从 IE 9 开始修复。这真的是一场你只能输的战斗，正如许多人之前告诉你的那样，除非你不听。

【讨论】：

是的，你别管我的 ClearType！
我理解您的担忧，但尽管具有建设性，但这并不是问题的答案。（并且在 IE8 中无法做到这一点也是错误的）
这是对正在发生的事情的最佳理解的答案。即使您可以找到另一个 IE8 hack，也有可能该 hack 也将在 IE9 中得到修复。你在打一场你赢不了的战斗。如果您想要像素完美的渲染，请提供 PNG 并忘记 Opera Mobile。

【解决方案3】：

Juliano，body{ filter:none } 是一个更好、更清洁的解决方案。在某些情况下使用不透明度会导致问题。

回答所有的 ClearType 爱好者——我也喜欢 ClearType。我认为这是液晶显示器的一大进步。问题是当 IE 尝试在某些特定元素上使用 ClearType 时，它看起来比禁用 ClearType 时更糟糕。这些包括淡入视图的元素（使用 javascript）以及导入的 @font-face 字体。如果您喜欢 ClearType，那么您将讨厌 IE 在这些情况下尝试使用 ClearType 时所做的事情……您的文本看起来又粗又长又丑。

在这些情况下，应尽可能删除 ClearType 以获得您想要的平滑字体。

【讨论】：

【解决方案4】：

没有用于禁用 cleartype 的 CSS 解决方案。您可以在 IE7 中执行此操作的原因是浏览器如何在使用过滤器的元素中呈现文本的结果。显然 IE8 可以更好地处理这个问题，因此您不能再使用该 hack（至少在没有实际应用某些过滤器的情况下不会）。

使用 cleartype 是用户的选择，而不是您应该强加给访问者的东西。就我个人而言，我真的很喜欢 cleartype，如果我访问一个禁用它的网站，我会认为该网站看起来真的很糟糕。

文本在不同的浏览器和不同的操作系统中呈现不同的事实是你必须忍受的。如果你想让每个人看起来都一样，你必须让它成为一个图像。

【讨论】：

为什么投反对票？如果你不说你不喜欢什么，那是没用的……
IE8 在淡入淡出等效果期间修复了 ClearType “pop”是真的吗？那很好啊。当其他浏览器在 Windows 上运行良好时，我一直不明白为什么 IE 无法正确处理。
完全同意。为什么要担心 IE7/8/9，当另一个浏览器或操作系统无论如何都会完全不同时呢？ OS X 上的文本看起来一点也不像 Windows 上的文本看起来一点也不像 Linux 上的文本。试图使文本显示像素完美是徒劳的。

【解决方案5】：

我觉得这里有很多人不听。 @Daniel Sloof 一直说他在问如何，而不是这是否是个好主意。 IE 是个坏主意，但事实是很多人仍在使用它的旧版本，而在这些人中，我冒险猜测 90% 的人甚至不知道 Clear Type 是什么——我当然不知道直到我开始调试站点。他们当然不知道他们的浏览器有多垃圾。如果你想设计在 IE 中看起来像在 webkit 中一样流畅的功能页面，你必须不时接受奇怪的 hack，当然它并不漂亮，但这就是生活。与漂亮的代码相比，漂亮的网站对大多数人的影响更大。

@capnhairdo 在谈到@font-face 时也很兴奋——你们中的任何人在 IE7 和 8 中启用 Clear Type 的情况下实际测试过这些字体吗？如果你有你会意识到很多都是可怕的 - 就像你在禁用 CT 的情况下通常会得到的一样 - 首先选择一个好的字体会打败对象，对于许多像 Cufon 和 Sifr 来说是不可行的解决方案.对我们中的一些人来说，看起来平庸是可以的。对我来说不是，我的网站出售我的形象。

当您考虑到甚至 Apple 都在他们的网站上强制 IE7 仿真 IE8 时，它应该强调大多数人确实不会受到与“推荐做法”的微小偏差的影响，相反，他们注意到的网站更多的是提供垃圾美学并且几乎不可读。这对任何人都没有任何好处，而且是 CT 开启时可能出现的问题！我争取尽可能多的一致性，并且无法给出 IE 用户在这种情况下应该和不应该有什么选择。微软通过制造试图偏离标准的浏览器来解决问题，他们自己已经发布了黑客和修复程序，因此我们必须使用它。如果这意味着利用错误来解决问题，那么只要它不会对性能、带宽或可用性产生太大影响，那就去做吧！生命太短了，不能乱引用标准合规性，我尊重理想的简洁代码和严格的方法，但是来吧，你们自己说完美并不存在。良好的设计和施工来自平衡的角度。在这里结束咆哮：-P

【讨论】：

【解决方案6】：

Cleartype 有时在基于 JavaScript/AJAX 的解决方案中看起来很愚蠢，但这个主题可能回答了为什么一些基于 jQuery 的动画在 IE 中看起来会被破坏的问题。所以答案是当 JavaScript 使用不透明度产生淡入淡出效果时（从 opactiy 到 0 1 秒内 100 个）然后从元素中删除 cleartype 字体，这些字体逐渐淡出，动画看起来非常糟糕。

【讨论】：

【解决方案7】：

由于某种原因，定位元素（{ position: relative } 内的任何内容） - 不具有小于 1 的不透明度的动画。

【讨论】：

【解决方案8】：

您可以在元素上同时使用 MS CSS 过滤器，并且仍然在其中的字体上启用 ClearType。只需添加一个子元素并将其 css“位置”设置为“相对”，并且 ClearType 不会被禁用。复制以下内容并尝试一下。

<style>
#parent{
     background-color:white;
     filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=2);
     position:relative;
     border:solid 1px black;
     padding:10px;
     width:500px;
}
#child{
     position:relative; /*THIS SOLVED THE CLEARTYPE DISABLING PROBLEM IN BOTH IE7 & IE8*/ :)
}
</style>

<div id="parent">
     <div id="child">This text should always be smooth</div>
</div>

【讨论】：