IE 9 не использует субпиксельное сглаживание при определенных условиях - PullRequest
Новая
       43

IE 9 не использует субпиксельное сглаживание при определенных условиях

16 голосов
/ 06 апреля 2011

[Исходное название: Текст IE 9 отображается очень плохо;Есть ли обходной путь? )

IE 9 очень плохо отображает текст в моем приложении.Проблема не в настройках Clear Type моего монитора, так как IE 9 в режиме совместимости, Firefox и Chrome все хорошо отображают текст.Вот параллельное сравнение того, как текст отображается в IE 9, IE 9 в режиме совместимости и Chrome:

IE 9

IE 9 Compatibility Mode

enter image description here

Я пытался применить этот ответ , но, похоже, он не относится ни к чему после IE 7. Кто-нибудь знает какие-либо обходные пути, которые мы можем применить к нашему сайту, чтобы исправитьПлохое отображение текста в IE 9?

Редактировать:

Я выполнил проблемную страницу до самого необходимого.Как видите, для воспроизведения не требуется много.Убедитесь, что IE имеет режим браузера, если IE9 и режим документа стандартов IE9: 

<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>

Ответы [ 7 ]

13 голосов
/ 12 апреля 2011

Краткий ответ: эта проблема возникает при указании размеров шрифта в pt (точки), а не в пикселях.

Так что получается, что новый движок рендеринга IE9 использует DirectWrite, который не привязывается к ближайшему пикселю, как это было с GDI +, поэтому, если ваш размер pt не сопоставляется с целым числом пикселей, он нарисует его именно так, и это выглядит размытым.

Режим совместимости IE8 не будет страдать от этой проблемы, поскольку он использует обычный рендеринг GDI, к которому мы привыкли.

Итак, проверьте все ваши таблицы стилей и т. Д., И если вы запрашиваете размер шрифта в точках, это именно то, что будет дано в IE9, и в зависимости от используемого шрифта и т. Д., Размер точки может или не может соответствовать четкому и чистый размер.

Это подробно объясняется здесь:

3 голосов
/ 18 апреля 2011

Кажется, установка opacity:.9999 на body делает текст в стандартном режиме IE9 намного более похожим на то, как это происходит в режиме Quirks.

1 голос
/ 20 июня 2012

Единственный способ улучшить внешний вид шрифтов - использовать функциональность IE8 с помощью: 

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

Обновление Microsoft http://support.microsoft.com/kb/2545698 уже установлено, и я уже использую font-size: 11px;

Решение opacity:.9999 было лучше, чем ничего, но не так хорошо, как в режиме IE8.

1 голос
/ 28 января 2012

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», проблема исчезнет.

Лично я почти готов с этим смириться, но если это действительно беспокоит вас, я бы предложил шаг за шагом урезать вашу таблицу стилей, чтобы отследить, что ее вызывает.

1 голос
/ 18 апреля 2011

IE9 в стандартном режиме использует субпиксельную адресацию для текста. Можно сказать, что он «сглаживает» текстовые символы, или вы можете сказать обратное, то есть «размывает» символы. По сути это одно и то же.

Лично я не нахожу каких-либо легко ощутимых различий между вашими тремя изображениями, и на самом деле предпочитаю первое. Однако это зависит от личных предпочтений.

Я немного искал в Интернете, и, похоже, это не способ убрать отключение субпиксельного рендеринга в IE9. Эта ссылка может вас заинтересовать: Отключить Cleartype (текстовое сглаживание) в IE9

В WPF есть возможность отключить субпиксельный рендеринг шрифта и заставить буквы «привязываться к пикселям». Но IE9, похоже, не имеет такого переключателя.

Однако моя рекомендация такова: действительно ли это большая проблема, что вы хотели бы сделать это в первую очередь? Если рендеринг текста на субпикселях дает вам очень уродливый вывод на ваш сайт (вы используете много очень мелкого шрифта?), Возможно, вам придется сначала переосмыслить макет вашего сайта. Шрифта настолько малого размера, что субпиксельная визуализация делает его неясным, его лучше избегать на веб-сайте.

И пока неизвестно, когда другие браузеры добавят субпиксельную визуализацию к тексту в будущем - фактически FF4 уже использует Direct2D, но, возможно, не использует DirectWrite.

0 голосов
/ 19 мая 2011

Если вам нужно использовать IE, и вы ненавидите это сглаживание, как на этом изображении http://i.stack.imgur.com/SViG0.png Попробуйте включить режим совместимости (ALT + T для отображения меню «Инструменты»)

0 голосов
/ 13 апреля 2011

Визуализация шрифта ClearType используется во всех режимах документа IE9; субпиксель позиционирование используется только в IE9 режим стандартов по умолчанию. в IE9 режимы совместимости - причуды, 7 и 8 - использовать целочисленные текстовые метрики.

Так что попробуйте переключить ваш тип документа в режим Причуды : 

<!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

...