For IE7, it's possible to add
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.
IE8 however, seems to ignore the css option, even when forcing the browser into IE7 compatibility mode using:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
TL;DR: How do I disable clear-type fonts in IE8 through CSS?
From what I recall, Internet Explorer 7+ disables ClearType when a filter is set on an element
#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!
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.
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.
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).
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.
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).
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.
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.
Juliano, body{ filter:none } is a better, cleaner solution. Using opacity causes problems in some situations.
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 worse than if you had ClearType disabled. These include elements that are faded into view (using javascript) as well as imported @font-face fonts. If you like ClearType, then you're going to hate what IE does when it tries to use ClearType in these situations...your text looks chunky, fat and ugly.
In these cases, ClearType should be removed if possible to achieve the smooth fonts you guys want.
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.
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.
@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.
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
for some reason positioned elements (anything inside { position: relative } ) -- isn't animated w/ an opacity less than 1.
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.
<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>
© 2022 - 2024 — McMap. All rights reserved.