CSS IE8：禁用 cleartype？

IE8: Disable cleartype?

提问by Daniel Sloof

For IE7, it's possible to add

对于 IE7，可以添加

filter: none;

to the body css to disable cleartype on fonts through CSS. I don't like the fuzzy look it gives, and it isn't really consistent across browsers. IE; Firefox and IE6 show it differently.

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

IE8 however, seems to ignore the css option, even when forcing the browser into IE7 compatibility mode using:

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

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

TL;DR: How do I disable clear-type fonts in IE8 through CSS?

TL;DR：如何通过 CSS 在 IE8 中禁用清晰字体？

采纳答案by rpetrich

From what I recall, Internet Explorer 7+ disables ClearType when a filter is set on an element

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

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

_{Also, do consider that many users may find disabling ClearType to be annoying. Use sparingly!}

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

回答by Joey

You can't. ClearType is a user setting on the browser. Any CSS which would disable it for certain elements is most likely a bug, not a feature (I've noticed it gets disabled for some dynamically generated or animated elements) and shouldn't be relied upon.

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

Whatever your preference in this regard is is probably not the user's one who sees your site. So why bother? Whoever doesn't like ClearType probably has it disabled already.

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

Note:The reason why it works with filters is that filters are not rendered by the browser but something else (DirectX probably, considering the "DX" in there. I'd still consider that a side-effect, and not a feature).

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

Note 2:Fixed as of IE 9, as expected. This really is a battle you can only lose, as many have told you before except you wouldn't listen.

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

回答by Guffa

There is no CSS solution to disable cleartype. The reason that you could do it in IE7 was a biproduct of how the browser rendered text in elements that used filters. Appearently IE8 handles this better so that you can't use that hack any more (at least not without actually applying some filter).

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

The use of cleartype is a user choice, and not something that you should impose on visitors. Personally I really like cleartype, and if I visisted a site where it was disabled I would think that the site looked really crappy.

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

The fact that text is rendered differently in different browsers and different operating systems is something that you have to live with. If you want it to look exactly the same for everyone, you have to make it an image.

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

回答by capnhairdo

Juliano, body{ filter:none } is a better, cleaner solution. Using opacity causes problems in some situations.

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

To answer all the ClearType enthusiasts--I like ClearType too. I think it's a great advancement for LCD monitors. Problem is that when IE tries to use ClearType on some specific elements, it looks worsethan if you had ClearType disabled. These include elements that are faded into view (using javascript) as well as imported @font-face fonts. If you likeClearType, then you're going to hatewhat IE does when it tries to use ClearType in these situations...your text looks chunky, fat and ugly.

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

In these cases, ClearType should be removed if possible to achieve the smooth fonts you guys want.

在这些情况下，如果可能的话，应该删除 ClearType 以获得你们想要的流畅字体。

回答by Oliver

There are a lot of people not listening here I feel. @Daniel Sloof said all along he was asking how, not whether or not it's a good idea. IE is a bad idea full stop but the fact is many people still use older versions of it and of those people I would hazard a guess that 90% don't know even know what Clear Type even is - I sure as hell didn't until I started debugging sites. They certainly aren't aware just how rubbish their browser is. If you want to design smooth functioning pages that look as slick in IE as they do in webkit you have to embrace the odd hack from time to time, sure its not pretty but that's life. Most people will be more influenced by a pretty site than pretty code.

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

@capnhairdo is bob on when he says about @font-face too - have any of you actually tested these fonts with Clear Type enabled in IE7 and 8? If you had you'd realise many are rendered horribly - like what you'd get normally with CT disabled - kind of defeats the object in selecting a nice font in the first place and for many the likes of Cufon and Sifr are not viable solutions. To some of us its ok for things to look mediocre. For me its not, my website sells my image.

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

When you consider even Apple are forcing IE7 emulation for IE8 on their site it should emphasise that most people really aren't impacted upon by minor deviations from 'recommended practice', instead they notice far more a site that delivers a crap aesthetic and is barely readable. That's not doing anyone any favours and is a problem which can occur with CT on! I strive for as much consistency as possible and couldn't give a stuff what choices an IE user should and shouldn't have in that situation. Microsoft stuffed up by making browsers that tried to deviate from standards, that they themselves have released hacks and fixes for so we have to work with it. If that means taking advantage of a bug to fix an issue then providing it's not impacting greatly on performance, bandwidth, or usability just do it! Life's too short to mess about around quoting standard compliancy, I respect neat code and strict methodology to an ideal but come on, you guys have as good as said it yourselves perfection doesn't exist. Good design and construction comes from a balanced perspective. Here endeth the rant :-P

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

回答by Oliver

Cleartype sometimes looks stupid in JavaScript/AJAX-based solutions but this topic possible answers to that question why some jQuery based animations look be broken in IE.. so answer is that when JavaScript makes fade effect with opacity (opactiy to 0 from 100 in 1 second duration) then cleartype fonts are removed from element that come to fade out and animation looks really bad.

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

回答by chovy

for some reason positioned elements (anything inside { position: relative } ) -- isn't animated w/ an opacity less than 1.

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

回答by Kris

You can have both an MS CSS filter on an element and still enable ClearType on the font within. Just add a child element and set its css "position" to "relative" and ClearType does not get disabled. Copy the following and try it.

您可以在元素上同时使用 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>