IE8:禁用 ClearType?

25
对于IE7,可以添加


filter: none;

将CSS应用于body以在CSS中禁用字体的清晰类型。我不喜欢它给出的模糊外观,而且在不同浏览器中也不一致。IE;Firefox和IE6显示不同。
然而,IE8似乎忽略了CSS选项,即使使用以下选项将浏览器强制转换为IE7兼容模式:
<meta http-equiv="X-UA-Compatible" content="IE=7" />


TL;DR:如何通过CSS禁用IE8中的ClearType字体?


17
给那些给我点踩的人:我的问题不是要问是否禁用ClearType是个好主意 - 我会自己考虑这个问题。问题是如何禁用ClearType。请给出具体方法。 - Daniel Sloof
13
当你的浏览器被劫持时,窗口被调整大小,弹出广告窗口满屏飞舞,地址栏被禁用,你喜欢这种情况吗?这是一种典型的错误认为自己知道得更好却没有权利或必要去干涉它的情况。反过来想想——如果一个网站强制开启ClearType字体平滑功能呢? - Jon Grant
7
我学到的最重要的一课是,“顾客不总是对的”。有时,他们甚至不知道自己想要什么。如果一个顾客要求你实施漏洞来在访客的个人电脑上安装间谍软件,你会这样做吗?只需解释说这种方法不可靠且不可取即可。 - Jon Grant
4
如果我想关闭清晰字体,我会自己去关闭它。作为用户,我不希望网站代表我做这个决定。 - Joel Mueller
7
那么幸运的是,这个问题与你作为用户想要什么无关。 - Daniel Sloof
显示剩余5条评论
8个回答

18

据我所知,当元素设置了滤镜时,Internet Explorer 7+会禁用ClearType。

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

另外,请注意许多用户可能会认为禁用ClearType很烦人。请慎用!


完美。它也适用于-ms-filter:none; filter:none;吗?因为那可能更正确。 - rpetrich
啊,太遗憾了。就目前而言,标记似乎有点丑。此外,还加了一个警告来阻止那些想要投反对票的人 :) - rpetrich
1
正如预料的那样,在IE 9中这将停止工作。太好了,少了一个试图强迫读者的网络开发人员。 - Joey
@joey,有合理的理由禁用ClearType,比如IE7和8破坏嵌入字体时。值得庆幸的是,IE9做得很好。 - Walf
3
@joey 或者……鼓声 像素字体!我喜欢清晰锐利的像素字体,希望我的用户也能看到它的清晰程度! - Maurycy
1
Maurycy:如果你将像素字体设计为没有适当提示的轮廓字体,那么你就会得到模糊的显示效果。 - Joey

16

你做不到。ClearType是浏览器上的用户设置。任何试图禁用它的CSS最可能是一个bug,而不是一个特性(我注意到它会在某些动态生成或动画元素上被禁用),并且不能依赖它。

无论你对此有什么偏好,可能并不是用户在访问你的网站时的偏好。所以为什么要费心呢?那些不喜欢ClearType的人可能已经将其禁用了。

注意:之所以使用过滤器可行,是因为过滤器不是由浏览器渲染的,而是由其他东西(可能是DirectX,考虑到其中的“DX”)。但我仍然认为这是一种副作用,而不是特性。

注意2:截至IE 9版本,这个问题已经得到修复,正如所有人都告诉过你的,只是你没有听取建议。


5
好的,你别碰我的 ClearType! - Benjol
5
我理解你的担忧,但虽然具有建设性,这并不是问题的答案。(同时,在不能在IE8中实现方面是错误的) - Daniel Sloof
7
这个答案最好表现出对正在发生的事情的理解。即使你能找到另一个IE8的hack,很可能那个hack也会在IE9中被修复。你正在打一场你无法赢得的战斗。如果你想要像素完美的渲染,请使用PNG并忘掉Opera Mobile。 - MSalters

3

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

回答所有ClearType爱好者——我也喜欢ClearType。我认为这是LCD显示器的一项重大进步。问题在于当IE尝试在某些特定元素上使用ClearType时,它看起来比禁用ClearType还要糟糕。这些包括通过javascript淡入视图的元素,以及导入的@font-face字体。如果你喜欢ClearType,那么当IE在这些情况下尝试使用ClearType时,你会讨厌它所做的事情...你的文本看起来又粗又丑。

在这些情况下,如果可能的话应该删除ClearType,以实现你们想要的平滑字体。


3

没有CSS解决禁用ClearType的方法。你在IE7中做到这一点的原因是浏览器对使用滤镜的元素中的文本呈现方式的副产品。显然IE8处理得更好,所以你不能再使用那个hack(除非实际应用某些滤镜)。

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

文本在不同的浏览器和操作系统中呈现的差异是你必须面对的事实。如果你希望让每个人看起来完全相同,你必须将其制作成图像。


为什么要点踩呢?如果你不说出你不喜欢的是什么,那就毫无意义了... - Guffa
IE8是否修复了ClearType在诸如淡入淡出等效果期间的“弹跳”问题?那将是很好的。我从来没有理解为什么IE不能像其他浏览器一样在Windows上表现良好。 - Nosredna
2
完全同意。为什么要担心IE7/8/9,因为另一个浏览器或操作系统会完全不同?在OS X上的文本看起来与Windows上的文本完全不同,而在Linux上的文本也是如此。试图使文本显示像素完美是徒劳的练习。 - deceze

1
我感觉这里有很多人没有在听。@Daniel Sloof 一直在问如何实现,而不是是否是个好主意。IE 简直就是个坏主意,但事实上很多人仍然使用旧版本的 IE,其中有90%的人甚至不知道 Clear Type 是什么 - 直到我开始调试网站我才知道 - 他们肯定不知道他们的浏览器有多糟糕。如果你想设计出在 IE 中看起来像在 Webkit 中一样流畅的页面,你必须不时地采用一些奇技淫巧,当然这并不漂亮,但这就是生活。大多数人会更受一个漂亮的网站的影响,而不是漂亮的代码。
@capnhairdo 提到 @font-face 时是正确的 - 你们中有人真的测试过这些字体在启用 IE7 和 8 的 Clear Type 后的效果吗?如果你这样做了,你会发现很多字体都渲染得非常糟糕 - 就像在 CT 禁用时通常会得到的效果 - 这种情况有点违背了选择漂亮字体的初衷,对于许多人来说,Cufon 和 Sifr 等解决方案也不可行。对于我们中的一些人来说,事物看起来平凡也是可以的。但对于我来说不行,我的网站展示了我的形象。
考虑到即使是苹果也在其网站上强制IE8模拟IE7,这应该强调大多数人并不会受到轻微偏差的影响,相反,他们更容易注意到外观丑陋、难以阅读的网站。这样做对任何人都没有好处,而且还可能导致CT出现问题!我尽可能地追求一致性,不关心IE用户在那种情况下应该或不应该有什么选择。微软犯了错误,他们制作的浏览器试图偏离标准,他们自己发布了一些补丁和修复程序,所以我们必须与之共同努力。如果这意味着利用一个漏洞来解决一个问题,只要它不会对性能、带宽或可用性产生很大影响,就去做吧!生命太短暂,不要围绕着标准合规性纠缠,我尊重整洁的代码和严格的方法论理念,但是,你们已经说过了,完美不存在。良好的设计和构造来自于一个平衡的视角。 rant结束:-P

1

在基于JavaScript/AJAX的解决方案中,ClearType有时看起来很愚蠢,但这个主题可能会回答为什么一些基于jQuery的动画在IE中看起来被破坏了的问题..所以答案是当JavaScript使用不透明度(从100到0的1秒持续时间)进行淡出效果时,ClearType字体将从要淡出的元素中移除,动画看起来非常糟糕。


0

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

0

由于某些原因,定位元素(任何在 { position: relative } 内的元素)-- 在不透明度小于1时无法进行动画处理。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接