IE 9 在某些条件下不使用亚像素抗锯齿

Posted 2023-03-15

技术标签:

【中文标题】IE 9 在某些条件下不使用亚像素抗锯齿【英文标题】：IE 9 does not use sub-pixel antialiasing under certain conditions 【发布时间】：2011-07-30 08:22:30 【问题描述】：

[原标题：IE 9 文本渲染很差；有解决方法吗？）

IE 9 在我的应用程序中呈现文本的效果很差。问题不在于我的显示器的清除类型设置，因为兼容模式下的 IE 9、Firefox 和 Chrome 都可以很好地呈现文本。以下是文本在 IE 9、兼容模式下的 IE 9 和 Chrome 下呈现方式的并排比较：

我尝试应用 this answer，但它似乎不适用于 IE 7 之后的任何内容。有人知道我们可以应用到我们的网站以修复 IE 9 的错误文本呈现的任何变通方法吗？

编辑：

我已将问题页面归结为基本要素。如您所见，复制并不需要太多。如果 IE9 和 IE9 标准的文档模式，请确保 IE 具有浏览器模式：

<html xmlns="http://www.w3.org/1999/xhtml">
  <body style="background-color: rgb(30, 34, 59); color: rgb(255, 85, 0); font-size: 20px">
    Home
  </body>
</html>

【问题讨论】：

您使用的是 IE9 的最终版本？我在 IE 9.0.8112.16421 RTM 中尝试过，它看起来并不模糊。我在 Windows 7 上的分辨率是 1920x1080。但是上面来自本地文件 t.html 的示例再次默认处于怪癖模式（使用 F12 检查） @David，如果您在同一个 F12 界面中将其切换回标准模式，您能看到我所描述的问题吗？ @Jacob，是的，在 IE9 标准模式下，我可以看到浏览器切换到不同的模式，一切都变得“模糊”。我在下面关于 IE9 和渲染模式的答案中添加了更多链接。这是一个screenshot of the rendering differences，使用上面的示例标记。注意顶部窗口的“文档模式”是“IE9 标准”，底部窗口是“Quirks”。 【参考方案1】：

简短回答：当您在 pt（点）而不是像素中指定字体大小时，这是一个问题。

所以发生的事情是新的 IE9 渲染引擎使用 DirectWrite，它不会像使用 GDI+ 那样捕捉到最近的像素，所以如果你的 pt 大小没有映射到整个像素数，它会绘制它正是这样，这使它显得模糊。

IE8 兼容模式不会遇到这个问题，因为它使用我们习惯的常规 GDI 渲染。

所以检查你所有的样式表等，如果你要求点大小的字体，这正是 IE9 中给出的，并且取决于你使用的字体等，你的点大小可能会或可能不会映射到清晰和清除大小。

这里有详细解释：

IE9's blurry font text - www.hanselman.com/blog/TheUltimateGuideOfFiveThingsForNewIE9UsersWhoFearChange.aspx

【讨论】：

不错的链接。但是，我的样式表都使用基于像素的字体大小，所以我认为这不是原因。在我的示例图像中，文本特别是 11 像素。愿意分享一个可以重现的简单测试用例吗？我从页面中提取了一个样本。看看“o”和“e”看起来有多糟糕，特别是。【参考方案2】：

似乎在body 上设置opacity:.9999 会使IE9 标准模式下的文本更类似于它在Quirks 模式下的表现。

【讨论】：

微软已经发布了一个补丁来修复Windows上IE9中的字体...support.microsoft.com/kb/2545698 我d/led补丁，但是，它说它已经安装了。但字体看起来仍然模糊。【参考方案3】：

标准模式下的 IE9 对文本使用亚像素寻址。可以说它“平滑”了文本字符，或者您可以反过来说，即它“模糊”了字符。本质上是一样的。

就个人而言，我没有发现您的三张图片之间有任何容易察觉的差异，实际上我更喜欢第一张。但是，这取决于个人喜好。

我在网上搜索了一下，这似乎不是一种清理关闭 IE9 上的亚像素渲染的方法。您可能会对此链接感兴趣：Disable Cleartype (text anti-aliasing) in IE9

在 WPF 中，有一个选项可以关闭亚像素字体渲染并强制字母“对齐像素”。但是IE9好像没有这样的开关。

但是，我的建议是：您想要解决的问题有那么大吗？如果亚像素文本渲染在您的网站上给您提供了非常难看的输出（您是否使用了很多非常小的字体？），也许您首先需要重新考虑您的网站布局。在网站中最好避免使用太小以至于子像素渲染使它们不清楚的类型。

而且不知道将来其他浏览器何时会向文本添加亚像素渲染——事实上 FF4 已经使用了 Direct2D，但可能没有使用 DirectWrite。

【讨论】：

我喜欢抗锯齿，只是不像 IE 9 那样。坦率地说，我很惊讶有人会认为第一张图像更清晰。 “气味”中的 l 甚至大小都不一样。 @Jacob，给你。我们有不同的偏好。我相信您的用户都会有自己的偏好。就个人而言，我更喜欢第一个版本，因为它更“精致”......例如，其他两个明显不那么紧凑，因为如果没有亚像素分辨率，你就无法做到最好的字距调整。另外，另外两个中“IE”中的“E”有点太宽了。不，我真的不认为这是意见分歧。任何经历过排版的人在看到其中的第一个之后可能会刺伤自己的眼睛，如果我仔细观察的话，它似乎正在融化。幸亏我视力不好！ :) 可能只有我一个人！我喜欢第一个，因为它看起来更“精致”。第二个似乎更清晰，因为它的间距更大，但我阅读第一个没有问题。真的看不出融化的效果……【参考方案4】：

Internet Explorer 9 似乎在真正随机的条件下停止使用亚像素抗锯齿。例如，这里是另一个触发它的例子（我假设还有更多）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<TITLE></TITLE>
<BODY>
Outside the div - with sub-pixel AA. :)
<div style="border-radius: 1px; overflow: hidden;">
Inside the div - no sub-pixel AA. :(
</div>
</BODY></HTML>

div 内的文本不会使用亚像素（“彩色”）抗锯齿渲染，但它外部的文本会。 border-radius 和 overflow 声明都是触发错误所必需的。

（如果它发生在他们的系统上，请尝试一下并发表评论？我很想知道该错误是否仅在某些系统配置上触发。）

如果您将 IE 开发人员工具中的文档模式切换为“IE9 标准”以外的任何内容，问题就会消失。

我个人几乎愿意接受它，但如果它真的让你感到困扰，我建议逐步剥离你的样式表以追踪触发它的原因。

【讨论】：

这个bug存在，让我有些头疼。删除 overflow: hidden 解决了这个问题。我在 Parallels 上运行 Win7，但它也在朋友的 PC 上显示。【参考方案5】：

让字体看起来不错的唯一方法是通过以下方式回退到 IE8 功能：

<meta http-equiv="x-ua-compatible" content="IE=8" />

微软更新http://support.microsoft.com/kb/2545698已经安装，我已经在使用font-size: 11px;

opacity:.9999 解决方案总比没有好，但不如 IE8 模式显示的那样好。

【讨论】：

【参考方案6】：

ClearType 字体渲染用于所有 IE9 文档模式；亚像素定位仅在 IE9 中使用默认标准模式。 IE9 兼容模式——Quirks、7 和 8 — 使用全像素文本指标。

所以尝试将您的文档类型切换为使用Quirks mode：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

或

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或其中一种兼容模式。

来自 MSDN 的更多信息

IE9’s Document Modes and javascript

Sub-pixel Fonts in IE9

Internet Explorer 9 Guide for Developers

Internet Explorer 9 Compatibility Cookbook

IE’s Compatibility Features for Site Developers

Testing sites with Browser Mode vs. Doc Mode

Defining Document Compatibility

【讨论】：

我们不想完全禁用 IE 9 引入的所有新功能（例如，我们想要 CSS 圆角）。怪癖模式不也是这样吗？您可以使用F12查看您正在查看的站点当前的文档模式和浏览器模式是什么。您还可以在 F12 面板中切换模式。我发现即使访问***也很模糊（默认为 IE9 标准模式）。对于 MS 而言，这确实是一个可怕的默认设置。 blogs.msdn.com/b/ie/archive/2011/03/24/… @David Freitas：这是一个疯狂的建议，就像在回答“我想念基于表格的布局，因为它们大约是 00 ”，我怎么能强迫我的网站像返回一样反复呈现白天？” @TechZilla，这就是我们正在谈论的 IE，这有什么理智的？【参考方案7】：

如果您需要使用 IE 并且讨厌此图像上的平滑处理 http://i.stack.imgur.com/SViG0.png 尝试打开兼容性视图（ALT+T 显示工具菜单）

【讨论】：

这不是关于我在 my 浏览器中看到我喜欢的文本；这是为了确保我们的应用程序的用户看到良好的文本呈现。

以上是关于IE 9 在某些条件下不使用亚像素抗锯齿的主要内容，如果未能解决你的问题，请参考以下文章

防止 TrueType 字体的抗锯齿（或子像素渲染）

在 IE9 中禁用 Cleartype（文本抗锯齿）

基于图片的抗锯齿方法

OpenGL 抗锯齿与 glAccum 和 glRasterPos

emWin6.x抗锯齿

如何在没有抗锯齿的情况下在画布上绘制像素字体