对于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中禁用清晰字体?
根据我的记忆,当在元素上设置过滤器时,Internet Explorer 7+会禁用ClearType
#target {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
此外,请考虑许多用户可能会发现禁用ClearType令人讨厌。谨慎使用!
你不能。 ClearType是浏览器上的用户设置。任何会为某些元素禁用它的CSS很可能是一个错误,而不是一个功能(我注意到它被某些动态生成或动画元素禁用)并且不应该被依赖。
无论您在这方面的偏好是什么,可能不是用户看到您网站的人。那为什么要这么麻烦?谁不喜欢ClearType可能已经禁用它。
注意:它与过滤器一起使用的原因是浏览器不会呈现过滤器,而是其他东西(DirectX可能,考虑到那里的“DX”。我仍然认为是副作用,而不是功能)。
注2:按照预期在IE 9中修复。这真是一场你只能失败的战斗,正如许多人之前告诉过你的那样,除非你不听。
Juliano,body {filter:none}是一个更好,更清洁的解决方案。使用不透明度会在某些情况下导致问题。
要回答所有ClearType爱好者 - 我也喜欢ClearType。我认为这对液晶显示器来说是一个很大的进步。问题是,当IE尝试在某些特定元素上使用ClearType时,它看起来比禁用ClearType时更糟糕。这些包括淡入视图的元素(使用javascript)以及导入的@ font-face字体。如果你喜欢ClearType,那么你会讨厌IE在这些情况下尝试使用ClearType时所做的事情......你的文字看起来很粗糙,又胖又丑。
在这些情况下,如果可能,应删除ClearType以获得您想要的平滑字体。
没有CSS解决方案来禁用cleartype。您可以在IE7中执行此操作的原因是浏览器如何在使用过滤器的元素中呈现文本。显然,IE8可以更好地处理这个问题,因此您不能再使用该黑客攻击(至少在没有实际应用某些过滤器的情况下)。
使用cleartype是用户的选择,而不是你应该对访问者施加的东西。我个人非常喜欢cleartype,如果我访问了一个被禁用的网站,我会认为该网站看起来很糟糕。
在不同的浏览器和不同的操作系统中呈现文本的事实是您必须要忍受的事情。如果你想让每个人看起来完全一样,你必须把它变成一个图像。
我觉得有很多人不在这里听。 @Daniel Sloof说他一直在问,不管这是不是一个好主意。 IE是一个坏主意完全停止,但事实是很多人仍然使用它的旧版本和那些人我会冒险猜测90%不知道甚至知道Clear Type甚至是什么 - 我当然没有直到我开始调试网站。他们当然不知道他们的浏览器有多垃圾。如果你想设计一个看起来像IE浏览器一样光滑的功能页面,你必须不时地接受奇怪的黑客,确定它不漂亮,但这就是生活。大多数人会受到漂亮网站的影响而不是漂亮的代码。
@capnhairdo在谈到@ font-face时也很兴奋 - 你们中有没有人在IE7和8中启用了Clear Type这些字体?如果你已经意识到许多人被渲染得非常可怕 - 就像你通常禁用CT一样 - 有点在第一时间选择一个漂亮的字体就失败了对于许多像Cufon和Sifr这样的人不是可行的解决方案。对于我们中的一些人来说,看起来平庸的事情还可以。对我来说不是,我的网站出售我的形象。
当你考虑到苹果甚至在他们的网站上强迫IE7进行IE7仿真时,它应该强调大多数人真的没有受到“推荐练习”的轻微偏差的影响,相反他们注意到更多的网站提供废话审美,几乎没有可读。这不是任何人的任何好处,并且是CT可能发生的问题!我力求尽可能多的一致性,并且无法给出IE用户在这种情况下应该和不应该有的选择。微软通过制造试图偏离标准的浏览器填补了他们自己已经发布的黑客攻击和修复,因此我们必须使用它。如果这意味着利用错误来修复问题,那么提供它不会对性能,带宽或可用性产生太大影响就行了!生活太短暂而无法引用标准的合规性,我尊重整洁的代码和严格的方法论以达到理想但是来吧,你们说得好,你们自己完美并不存在。良好的设计和结构来自平衡的视角。这里咆哮:-P
Cleartype有时在基于JavaScript / AJAX的解决方案中看起来很愚蠢但是这个主题可能回答了这个问题为什么一些基于jQuery的动画看起来在IE中被破坏了......所以答案就是当JavaScript使用不透明度产生淡入淡出效果时(从100合1中看到0为opactiy)第二个持续时间)然后从淡出的元素中删除cleartype字体,动画看起来非常糟糕。
由于某种原因,定位元素({position:relative}内的任何内容) - 不具有小于1的不透明度的动画。
您既可以在元素上同时使用MS CSS过滤器,也可以在其中的字体上启用ClearType。只需添加一个子元素并将其css“position”设置为“relative”,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>