Опрос
Вы участвуете в программе Windows Insider?
Популярные новости
Обсуждаемые новости

07.12.2010 11:14 | Betelgeuse

В Internet Explorer 9 была представлена технология субпиксельного позицонирования шрифтов ClearType, которая является частью аппаратно-ускоренного механизма визуализации контента HTML5. Поскольку IE9 находится в фазе в бета-тестирования, мы получаем огромное количество замечаний, предложений и вопросов, касающихся этой функции. В этой статье речь пойдёт о вещах, которые должны быть известны веб-разработчикам. Но поскольку ClearTypе может быть весьма полезен всем пользователям Windows, давайте начнём с него.


Настройка ClearType
Пользователи Windows 7 могут использовать встроенный инструмент настройки ClearTypе, который можно найти в панели управления Windows в апплете "Оформление и Персонализация/Шрифты/Настройка ClearType", чтобы установить параметры ClearTypе (на скриншоте приведена вторая страница тюнера). Пользователи Windows Vista могут использовать онлайн-тюнер из Internet Explorer (онлайн-тюнер должен быть использован с Internet Explorer, поскольку его работа основана на ActiveX).


Для получения наилучших результатов необходимо настроить ClearType под ваш конкретный монитор.


ClearType и субпиксельное позиционирование шрифтов работают, используя определённые характеристики ЖК-мониторов, чтобы обеспечить улучшенное качество отображения шрифта по сравнению с обычным сглаживанием или анти-альясингом. Это улучшает читабельность текста на цветных ЖК-мониторах с цифровым интерфейсом, например, в ноутбуках и больших панелях. Читабельность на ЭЛТ-экранах может также быть несколько улучшена.


Что значат субпиксельные шрифты для веб-разработчиков?
Текст на вашей веб-странице будет расположен одинаково при разных разрешениях монитора и коэффициентах масштабирования, если он будет масштабирован и визуализирован с использованием субпиксельных шрифтов. Субпиксельное позиционирование шрифтов ClearType предлагает самое точное расположение символов на экране, особенно небольшом, где разница между субпикселем и целым пикселем представляет значительную часть ширины глифа. Это позволяет масштабировать текст в идеальной области разрешения и визуализировать его в его естественном местоположении. Это означает, что разрыв строки на веб-странице не будет сдвигаться в зависимости от конфигурации у различных пользователей.

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

Более старые версии Internet Explorer используют цельнопиксельные текстовые метрики, в которых размер шрифта, ширина букв и высота строки округляются до ближайшего пикселя. Например, в IE8, выбирая шрифт 10 pt, вы получите 13-пиксельный размер шрифта, даже если математически точный перевод точек в пиксели даёт 13.333-пиксельный размер шрифта. Таблица иллюстрирует это для обычных размеров шрифта, указанных в точках (pt).

Требуемый кегль8pt9pt10pt11pt12pt14pt16pt18pt
Точные пикселиОкруглённые пикселиКегль, получаемый в IE8Изменения размера шрифта в IE9
10.67px11px8.25ptМеньше
12px12px9ptБез изменений
13.33px13px9.75ptБольше
14.67px15px11.25ptМеньше
16.px16px12ptБез изменений
18.67px19px14.25ptМеньше
21.33px21px15.75ptБольше
24px24px18ptБез изменений

В режиме стандартов IE9 вы получаете то, что запрашиваете: запрашивая 10 pt., вы получаете 10 pt. (13.33 пикселей), немного больше, чем можно было получить в IE8 и ранее. Аналогично, в IE9 8 pt. меньше на четверть точки.


Субпиксель против пикселя: различия в отображении
Чтобы понять, как субпиксельные шрифты влияют на веб-страницу, важно понимать, как работают версии шрифтов в предыдущих версиях Internet Explorer. В двух таблицах, представленных ниже, сравниваются два размера шрифта четырёх разных семейств шрифтов.

В первой таблице размер шрифта и высота строки примеров указаны в пикселях (12 и 16 пикселей, соответственно). Это значит, что один и тот же размер шрифта и междустрочный интервал используется и в IE9, и в устаревших видах. Это изолирует различия между шириной субпикселя и шириной целого пикселя. Можно заметить, что ширина субпикселя в IE9 в целом отображается несколько уже, чем ширина целого пикселя в колонке IE8. Это типично для шрифтов с нормальной плотностью; жирные шрифты отображаются несколько шире. Разница особенно заметна в третьем ряду (семейство шрифтов Georgia).

Ширина субпикселя в IE9
Ширина целого пикселя в IE8Ваш браузер
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.

Размер шрифта: 12 pt.; высота строки: 16рх ; семейство шрифтов (сверху вниз): Verdana, Arial, Georgia, Times New Roman.


Во второй группе примеров запрашивался размер шрифта 8pt. и высота строки 1.3em. Как было указано выше, в предыдущих версиях IE, выбирая шрифт, размером 8pt, мы получали шрифт, размером 11px или 8.25pt. Различия, которые можно увидеть в таблице ниже, являются результатом двух субпиксельных эффектов: более мелкий и точный размер шрифта и меньшая ширина субпикселя.

Размер субпикселя в IE9
Размер целого пикселя в IE8Ваш браузер
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.
The Quick Brown Fox Jumps Over the Lazy Dog. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ornare odio vel risus. Maecenas elit metus, pellentesque quis, pretium.

Размер шрифта: 8 pt.; высота строки: 1.3 еm; семейство шрифтов (сверху вниз): Verdana, Arial, Georgia, Times New Roman.


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


Влияние на масштаб и изменение масштаба
Как уже говорилось выше, текст, который масштабирован и визуализирован с использованием субпиксельного позиционирования, является независимым в плане масштаба и разрешения. Это важно, так как всё больше и больше ноутбуков выпускаются с дисплеями высокого разрешения. С такими мониторами Internet Explorer используется по умолчанию с масштабом 125%.

Нижеследующая диаграмма показывает, что происходит в IE8 с шириной целого пикселя. Обратите внимание, что при масштабе 125% слово "pellentesque" находится в пятой строке, в то время как при масштабе 100% оно переносится на шестую строку.


Это изменение переноса является результатом изменения длины строки. Следующая диаграмма показывает, что изображение с масштабом 125% накладывается на верхнюю часть изображения с масштабом 100%, увеличенного в 1,25 раз:


Видно, что каждая строка в изображении с масштабом 125% визуализирована короче, чем увеличенное изображение с масштабом 100%. Это потому, что ошибки округления цельнопиксельного расположения больше при меньшем коэффициенте масштаба.
Сравним это с таким же образцом в IE9, используя субпиксельное сглаживание шрифта:


Разница практически не заметна. Это потому, что ширина субпикселя при масштабе 100% соизмеряется с шириной субпикселя при масштабе 125%. Это равномерное масштабирование является главным преимуществом субпиксельного позиционирования шрифта. Заметим также, что в IE9 все строки разрываются одинаково, тогда как в IE8 разрывы строки изменились. Это значит, что формат веб-страницы может меняться, когда пользователи увеличивают или уменьшают масштаб - действие, которое обычно не принимается в расчет при разработке веб-сайта.


Готовность к будущему
Размеры субпиксельных шрифтов и ширина символа в IE9 - это важный шаг в будущее. Примеры IE9, приведённые выше, показывают, что подразумевается под масштабо-независимыми текстовыми метриками. Это важные характеристики текста, так как мы движемся к дисплеям с более высоким разрешением, новым форм-факторам, в которых жест масштабирования является важным элементов, и веб-технологиям, среди которых SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика), HTML5 canvas (элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript), и CSS 2D Transforms, предполагающая равномерное масштабирование текста.

Веб-разработчикам следует знать, что с субпиксельным позиционированием шрифта всегда можно получить то, что требуется. Наряду с общепринятым мнением о том, что дизайн веб-страниц всегда должен быть устойчивым к незначительным различиям в шрифтах и рендеринге шрифта, введение субпиксельных шрифтов придаёт этому большую значимость. Преимущества заключаются в том, что дизайн страницы не будет зависеть от разрешающей способности устройства или изменения масштаба.

К слову сказать, субпиксельное позиционирование в в IE9 реализовано с помощью подсистем Direct 2D и DirectWrite, появившихся в Windows 7.

Тэд Джонсон (Ted Johnson),
руководитель группы разработчиков по веб-графике


Источник: http://blogs.msdn.com/ieru
Перевод: Betelgeuse

Комментарии

Не в сети

Не знаю какое там субпиксельное позиционирование, но шрифты в ие9 выглядят просто ужасно - читать невозможно.
Конечно дело скорей всего в отключенном клиртайпе, который обычно только портит шрифт, но ведь другие браузеры почему-то нормально отображают все.

07.12.10 12:50
0
Не в сети

Да, у меня тоже глаза в кучу от таких шрифтов. Но клиртайп у меня включен на обеих машинах с ИЕ9. Вобщем, я жду финальный релиз, вот тогда и поговорим, насколько ИЕ9 получился функционально удачным. Пока, по мне - ничего особенного. Ему нечем меня удивить или просто порадовать.

07.12.10 12:56
0
Не в сети

Форматирование ББ-кодами в статье доставляет

07.12.10 12:57
0
Не в сети

Хз, в бете шрифты меня вполне устраивают.
Кстати, колонка "Ваш браузер" у меня совершенно иная, чем "Размер субпикселя в IE9", хотя у меня как раз IE9 Beta

07.12.10 13:46
0
Не в сети

Так это копипаст с блога ИЕ.
Там совпадает.
А мне шрифты нравятся. Правда есть косяки кое где. Главное что с этой системой можно намного лучше встраивать оригинальные шрифты - незаточенные под клеартайп

07.12.10 17:21
0
Не в сети

Какие-бы шрифты не были всё равно на ИЕ не перейду. Как он страдал склерозом так и страдает. Стабильно через неделю-две пароли забывает, из-за чего иногда быстро не могу скачать нужную мне инфу. Приходится лазить по почте и искать свои пароли, жуть как бесит!

07.12.10 22:53
0
Не в сети

Разница практически не заметна. Это потому, что ширина субпикселя при масштабе 100% соизмеряется с шириной субпикселя при масштабе 125%. Это равномерное масштабирование является главным преимуществом субпиксельного позиционирования шрифта. Заметим также, что в IE9 все строки разрываются одинаково, тогда как в IE8 разрывы строки изменились. Это значит, что формат веб-страницы может меняться, когда пользователи увеличивают или уменьшают масштаб


Ура, именно поэтому пользовался масштабированием в IE всего пару раз. А вот теперь можно будет и поюзать

08.12.10 05:58
0
Не в сети

Sm1leДа, про слероз я уже и писал им даже, но игнорируют почему-то.
Но я уже привык Большинство паролей автозаполнением сами вводятся. Как-то так.

08.12.10 10:58
0
Для возможности комментировать войдите в 1 клик через

По теме

Акции MSFT
420.55 0.00
Акции торгуются с 17:30 до 00:00 по Москве
Все права принадлежат © ms insider @thevista.ru, 2022
Сайт является источником уникальной информации о семействе операционных систем Windows и других продуктах Microsoft. Перепечатка материалов возможна только с разрешения редакции.
Работает на WMS 2.34 (Страница создана за 0.029 секунд (Общее время SQL: 0.013 секунд - SQL запросов: 67 - Среднее время SQL: 0.0002 секунд))
Top.Mail.Ru