Субпиксельные шрифты в Internet Explorer 9
В Internet Explorer 9 была представлена
Настройка ClearType
Пользователи Windows 7 могут использовать встроенный инструмент настройки ClearTypе, который можно найти в панели управления Windows в апплете "Оформление и Персонализация/Шрифты/Настройка ClearType", чтобы установить параметры ClearTypе (на скриншоте приведена вторая страница тюнера). Пользователи Windows Vista могут использовать
Для получения наилучших результатов необходимо настроить ClearType под ваш конкретный монитор.
ClearType и субпиксельное позиционирование шрифтов работают, используя определённые характеристики ЖК-мониторов, чтобы обеспечить улучшенное качество отображения шрифта по сравнению с обычным сглаживанием или анти-альясингом. Это улучшает читабельность текста на цветных ЖК-мониторах с цифровым интерфейсом, например, в ноутбуках и больших панелях. Читабельность на ЭЛТ-экранах может также быть несколько улучшена.
Что значат субпиксельные шрифты для веб-разработчиков?
Текст на вашей веб-странице будет расположен одинаково при разных разрешениях монитора и коэффициентах масштабирования, если он будет масштабирован и визуализирован с использованием субпиксельных шрифтов. Субпиксельное позиционирование шрифтов ClearType предлагает самое точное расположение символов на экране, особенно небольшом, где разница между субпикселем и целым пикселем представляет значительную часть ширины глифа. Это позволяет масштабировать текст в идеальной области разрешения и визуализировать его в его естественном местоположении. Это означает, что разрыв строки на веб-странице не будет сдвигаться в зависимости от конфигурации у различных пользователей.
Визуализация шрифтов ClearType используется во всех режимах документов IE9; субпиксельное позиционирование используется только в режиме стандартов IE9. Режимы совместимости IE9 —Quirks, 7,и 8— используют цельнопиксельные текстовые метрики.
Более старые версии Internet Explorer используют цельнопиксельные текстовые метрики, в которых размер шрифта, ширина букв и высота строки округляются до ближайшего пикселя. Например, в IE8, выбирая шрифт 10 pt, вы получите 13-пиксельный размер шрифта, даже если математически точный перевод точек в пиксели даёт 13.333-пиксельный размер шрифта. Таблица иллюстрирует это для обычных размеров шрифта, указанных в точках (pt).
Точные пиксели | Округлённые пиксели | Кегль, получаемый в IE8 | Изменения размера шрифта в IE9 |
10.67px | 11px | 8.25pt | Меньше |
12px | 12px | 9pt | Без изменений |
13.33px | 13px | 9.75pt | Больше |
14.67px | 15px | 11.25pt | Меньше |
16.px | 16px | 12pt | Без изменений |
18.67px | 19px | 14.25pt | Меньше |
21.33px | 21px | 15.75pt | Больше |
24px | 24px | 18pt | Без изменений |
В режиме стандартов IE9 вы получаете то, что запрашиваете: запрашивая 10 pt., вы получаете 10 pt. (13.33 пикселей), немного больше, чем можно было получить в IE8 и ранее. Аналогично, в IE9 8 pt. меньше на четверть точки.
Субпиксель против пикселя: различия в отображении
Чтобы понять, как субпиксельные шрифты влияют на веб-страницу, важно понимать, как работают версии шрифтов в предыдущих версиях Internet Explorer. В двух таблицах, представленных ниже, сравниваются два размера шрифта четырёх разных семейств шрифтов.
В первой таблице размер шрифта и высота строки примеров указаны в пикселях (12 и 16 пикселей, соответственно). Это значит, что один и тот же размер шрифта и междустрочный интервал используется и в IE9, и в устаревших видах. Это изолирует различия между шириной субпикселя и шириной целого пикселя. Можно заметить, что ширина субпикселя в IE9 в целом отображается несколько уже, чем ширина целого пикселя в колонке IE8. Это типично для шрифтов с нормальной плотностью; жирные шрифты отображаются несколько шире. Разница особенно заметна в третьем ряду (семейство шрифтов Georgia).
Ширина целого пикселя в 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. |
Во второй группе примеров запрашивался размер шрифта 8pt. и высота строки 1.3em. Как было указано выше, в предыдущих версиях IE, выбирая шрифт, размером 8pt, мы получали шрифт, размером 11px или 8.25pt. Различия, которые можно увидеть в таблице ниже, являются результатом двух субпиксельных эффектов: более мелкий и точный размер шрифта и меньшая ширина субпикселя.
Размер целого пикселя в 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. |
Внимательно изучив два примера выше, можно заметить, что высота прописной буквы и высота строчных букв шрифтов одинакова, но ширина букв и междустрочный интервал отличаются. В случае с субпикселем, ширина букв и междустрочный интервал полностью соответствуют требуемому шрифту; в случае с целым пикселем, запрашиваемый шрифт округлый.
Влияние на масштаб и изменение масштаба
Как уже говорилось выше, текст, который масштабирован и визуализирован с использованием субпиксельного позиционирования, является независимым в плане масштаба и разрешения. Это важно, так как всё больше и больше ноутбуков выпускаются с дисплеями высокого разрешения. С такими мониторами 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 реализовано с помощью подсистем
Тэд Джонсон (Ted Johnson),
руководитель группы разработчиков по веб-графике
Источник:
Перевод: Betelgeuse
Комментарии
Не знаю какое там субпиксельное позиционирование, но шрифты в ие9 выглядят просто ужасно - читать невозможно.
Конечно дело скорей всего в отключенном клиртайпе, который обычно только портит шрифт, но ведь другие браузеры почему-то нормально отображают все.
Да, у меня тоже глаза в кучу от таких шрифтов. Но клиртайп у меня включен на обеих машинах с ИЕ9. Вобщем, я жду финальный релиз, вот тогда и поговорим, насколько ИЕ9 получился функционально удачным. Пока, по мне - ничего особенного. Ему нечем меня удивить или просто порадовать.
Хз, в бете шрифты меня вполне устраивают.
Кстати, колонка "Ваш браузер" у меня совершенно иная, чем "Размер субпикселя в IE9", хотя у меня как раз IE9 Beta
Так это копипаст с блога ИЕ.
Там совпадает.
А мне шрифты нравятся. Правда есть косяки кое где. Главное что с этой системой можно намного лучше встраивать оригинальные шрифты - незаточенные под клеартайп
Какие-бы шрифты не были всё равно на ИЕ не перейду. Как он страдал склерозом так и страдает. Стабильно через неделю-две пароли забывает, из-за чего иногда быстро не могу скачать нужную мне инфу. Приходится лазить по почте и искать свои пароли, жуть как бесит!
Разница практически не заметна. Это потому, что ширина субпикселя при масштабе 100% соизмеряется с шириной субпикселя при масштабе 125%. Это равномерное масштабирование является главным преимуществом субпиксельного позиционирования шрифта. Заметим также, что в IE9 все строки разрываются одинаково, тогда как в IE8 разрывы строки изменились. Это значит, что формат веб-страницы может меняться, когда пользователи увеличивают или уменьшают масштаб
Ура, именно поэтому пользовался масштабированием в IE всего пару раз. А вот теперь можно будет и поюзать
Sm1leДа, про слероз я уже и писал им даже, но игнорируют почему-то.
Но я уже привык Большинство паролей автозаполнением сами вводятся. Как-то так.
По теме
- Еще пару слов о защите пользователей IE9 от отслеживания
- [Temp] Бенчмарк HTML5 Blizzard: проверьте аппаратное ускорение вашего браузера
- [Temp] Работаем с закрепление сайтов
- Блог IE в 2010: на связи с вами
- С новым аппаратно-ускоренным годом!
- HTML5: экспериментальный и готовый к использованию
- Доступно декабрьское накопительное обновлениие безопасности для IE
- IE9 и конфиденциальность: введение в защиту от слежения
- Более быстрый и умный список Compatibility View List в IE9
- Интерфейс пользователя IE9: развитие вкладок IE9 в Windows 7