Webfonts — разбираемся с антиалиасингом под Windows (UPD)

  • Tutorial
Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.

Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.

(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)




Суть проблемы


Небольшое общее замечание — приведенные в статье исследования проводились под Windows 7. Будет интересно узнать в комментариях о положении дел на других платформах.

Итак, разница между двумя приведенными фрагментами состоит в том, что на втором из них при отображении шрифта браузер применяется так называемое сглаживание (antialiasing). Как же заставить браузер использовать это сглаживание? Как в дальнейшем оказалось, все очень сильно зависит как от самого браузера так и от настроек операционной системы. Забегая вперед, скажу, что сглаживание бывает двух видов и результаты их работы отличаются друг от друга. Первый тип я уже упомянул, а второй — это так называемый субпиксельный рендериг. Но давайте обо всем по порядку.

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

Chrome


К счастью, я не первый, кто сталкивается с этой проблемой и поиск по ключевым словам быстро вывел на ее решение с помощью использования SVG шрифтов, которые, в отличии от своего TrueType аналога, в Chrome рендерятся с применением первого типа сглаживания, то есть антиалиасинга. Казалось бы,- вот оно счастье,- но не тут-то было!

Наверняка, существуют и другие способы получения необходимых font-файлов, но почему-то мной был выбран сервис FontSquirrel. Не хочу делать поспешных выводов, но на мой взгляд, в их генератор css вкралась ошибка.

В качестве подопытного кролика возьмем уже готовый шрифт Colaborate с их сайта. В архиве находится набор шрифтов в различных форматах, файл css и demo.html Открываем последний в Chrome и начинаем недоумевать, а где же, собственно, сглаживание? Особенно сильно его отсутствие заметно у Bold начертания.

Откроем css и посмотрим, что же для нас сгенерировали на сервере FontSqurell:

@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('ColabThi-webfont.eot');
    src: url('ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabThi-webfont.woff') format('woff'),
         url('ColabThi-webfont.ttf') format('truetype'),
         url('ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('ColabThi-webfont.eot');
    src: url('ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabThi-webfont.svg') format('svg'),
         url('ColabThi-webfont.woff') format('woff'),
         url('ColabThi-webfont.ttf') format('truetype');
         
    font-weight: normal;
    font-style: normal;
}

Как было написано выше, разница лишь в одной строчке. Определение svg шрифта поставлено сразу под определение eot и из него удалена подстрока #ColaborateThinRegular. О разнице судите сами — справа фрагмент с оригинальным css (сглаживания нет), слева после внесения исправлений:
Два фрагмента

Объяснение этому весьма простое — переместив описание svg шрифта мы повысили его приоритет в WebKit браузерах (Chrome, Safari) и он стал использоваться вместо TTF, который эти браузеры под Windows почему-то не сглаживают.

Не могу судить о причинах, по которым генератор этого сервиса делает именно такой css, а не какой-то другой. Возможно, раньше это работало хорошо, но с тех пор могло что-то измениться в WebKit. Думаю, что стоит написать им багрепорт, если в комментариях не приведут какого-то более логичного объяснения.

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

Оптимизация загрузки


Как известно, любая красота требует жертв. В случае с пользовательскими шрифтами жертвовать приходится временем загрузки страницы за счет увеличения размеров загружаемых данных. Бороться с этим можно, применив сжатие наших шрифтовых файлов. Для svg процедура следующая — при помощи gzip сжимаем наш файл, переименовываем его — присваиваем расширением svgz и добавляем в конфигурацию сервера новый MIME-type. Привожу пример для Apache (можно указывать в .htaccess):

AddType font/opentype .svg .svgz
AddEncoding gzip .svgz

И меняем соответствующую строчку в css (добавляем z) — url('ColabThi-webfont.svgz') format('svg')

Обратите внимание, font/opentype не является стандартным MIME-type, но именно такой тип помогает избавиться от назойливой ошибки в консоли Chrome: Resource interpreted as Font but transferred with MIME type image/svg+xml

Настройки FontSquirrel


Теперь о том, как настраивать FontSquirrel для включения в состав шрифта символов, выходящих за пределы таблицы ASCII-7. Отображенные ниже на скриншоте настройки доступны в режим Expert. Приведу вариант, хорошо сработавший в моем случае, не забудьте включить другие типы шрифтов, мне был нужен только SVG.
Скриншот с настройками

Буду признателен за уточнения к этим настройкам, если можно их как-то улучшить, от знатоков своего дела в комментариях.

Другие браузеры


В заключении, коротко коснусь особенностей IE, FireFox и Opera. Напомню, что речь идет о Windows7.

Тут стоит сказать, что алгоритм антиалиасинга, применяемый Chrome для SVG шрифтов, это не то же самое, что субпиксельное сглаживание, используемое различными ОС для отображения экранных шрифтов. В Windows эта технология называется ClearType. Посмотрите на разницу — красный шрифт это Chrome + SVG Antialiasing, черный FireFox + TTF ClearType. На этом фрагменте хорошо заметно, что антиалиасинг добавляет «лишние» пиксели, делая буквы чуть шире. Для некоторых макетов про кросбраузерную pixel perfect верстку можно забыть.
Antialiasing vs Subpixel rendering

Нехитрым экспериментальным путем удалось установить, что сглаживание в FF и большой O напрямую зависят от настроек ClearType в операционной системе. Если выключить эту функцию, то заставить браузеры сглаживать шрифты невозможно, хотя IE игнорирует указания операционной системы и сглаживает шрифты всегда. Как пишут, какое-то время назад появилась css директива (-webkit-)font-smooth(ing), но в последних версиях FireFox ее поддержку почему-то убрали. Если вы знаете, как можно обойти эти ограничения, напишите пожалуйста об этом в комментариях. Так же неясен ответ на вопрос как отключить сглаживание шрифтов, ведь существуют ситуации, когда этого делать не надо.

Заключение


В процессе написания этой статьи был прочитан ряд тематических статей и просмотрено много сайтов через призму использования нестандартных шрифтов, с целью определения для себя сферы применимости этой полезной технологии. Хочу сказать, что вывод я сделал следующий — применять нестандартные фонты можно и нужно (иначе, всех зохавает bootstrap), но в ограниченном количестве, для декорирования некоторых элементов UI. И основной текстовый контент нужно оставить в покое! Иначе, сайт может выглядеть совсем не так, как это изначально задумывалось. В подкреплении этих слов даю ссылку на вдумчивую статью, в которой говорится приблизительно тоже самое, но более развернуто. Возможно, в будущем ситуация изменится, но для этого в браузерах должна появиться единая подсистема управления рендерингом шрифтов, одинаково отображающая текст, хотя бы в рамках одной платформы.


UPD Эврика! После напоминания от GreatRash решил все-таки узнать причину, по которой у меня не срабатывал -webkit-font-smoothing и нашел в процессе баг репорт. Там сто с лишним комментариев, но среди вялого бухтения встретился настоящий бриллиант! Эта конструкция позволяет отказаться от SVG шрифтов и, на первый взгляд, Chrome стал рендерить текст так же, как и все остальные браузеры, хотя расстояние между буквами остается другим, но это, видимо, тоже можно вылечить вот по этому рецепту

body {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
}
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 35
  • 0
    По-моему я уже это встречал в предыдущих постах («Как настроить @font-face?» — habrahabr.ru/qa/22377/), но ваше описание явно лучше!
    • 0
      Удивительно, как может прятаться полезная информация! Прежде, чем написать свою статью, я «обыскал» хабр через его собственный поиск и через гугл, но эту статью я так и не нашел. Спасибо!
    • 0
      Спасибо вам большое! Давно с этой проблемой живу, т.к. лень :)
      • 0
        Точно-точно, пока самого к стенке вилами не приперло, тоже мирился :)
        • 0
          Самое обидное что с таким отображением шрифтов не борится сам гугл, такая беду с кастомными шрифтами я наблюдаю в Хроме наверное уже минимум год, возможно чуть меньше. Но точно давно.
          Конечно можно обвинить разработчиков сайтов в их не достаточном упорстве в поиске решений, но все же браузер должен нормально уметь рендерить текст, все же это его основная задача.
          И я решительно не понимаю почему этот вопрос для гугловцев(идеальное представление контента) не так важен :(
      • +7
        Вот бы еще найти способ что бы хром шрифты с гугл фонтс нормально рендерил…
        Вверху лиса, внизу хром, шрифт open sans:
        image
        • 0
          Посмотрите в сторону правильного указания font-weight
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Попробуйте решение, которое я привел в апдейте к посту. И, если не сложно, напишите пожалуйста сюда о результатах.
              • 0
                К сожалению, никаких изменений не увидел (нижний естественно хром):
                i.imgur.com/sEosyPZ.png

                Я так думаю что фикса и не существует, шрифт так же отображается и на самом гугл фонтс:
                www.google.com/webfonts/specimen/Open+Sans
                Вообще забавно, браузер от гугла криво рендерит шрифты от того же гугла…
                • 0
                  Что интересно, на 24 размере и меньше, сглаживание есть, потом пропадает и снова появляется на 60… бред какой-то.
                  Картинка 1


                  Причем, последний рецепт, на мой взгляд, делает все с точностью наоборот
                  Картинка 2


                  Нипанятна…
                  • 0
                    разница очень даже заметна и без увеличения картинки
                    если увеличить то вот что видим
                    image
                    не всегда antialiased выглядит лучше чем subpixel-antialiased (как в случае на картинке)
                    некоторые буквы совсем уж «рваные» получаются (
              • НЛО прилетело и опубликовало эту надпись здесь
                • +1
                  Не только хинтинг, но и кернинг и вообще всё. В SVG ничего этого просто нету.
                  • НЛО прилетело и опубликовало эту надпись здесь
                • +1
                  В последнем Forefox под Ubuntu шрифты сглаживаются отлично.
                  Просто для информации.

                  • 0
                    А у меня обратная проблема. Есть шрифт с иконками Chrome и Opera сглаживается нормально, Firefox и IE — криво.

                    Буду благодарен за совет.
                    • 0
                      По-моему, тут SVG тут куда лучше подходит.
                      • 0
                        там очень много иконок, а svg спрайт глючил.
                        • +1
                          Они маленькие, можно и прямо в CSS внедрять без спрайта.
                      • НЛО прилетело и опубликовало эту надпись здесь
                    • +1
                      Прочтите «Сглаживание веб-шрифта при помощи CSS3», это как раз для Google Chrome рецепт.
                      • 0
                        это не всегда помогает, к сожалению, да и муар вокруг шрифта на больших размерах иногда недопустим с точки зрения дизайнера.
                      • +1
                        справа фрагмент с оригинальным css (сглаживания нет), слева после внесения исправлений:

                        зачем так вывернуто? Везде принято, что слева — до, справа — после.
                        • 0
                          А можно я попридираюсь и спрошу, что такое загадочное «ASCII-8»? Стандарт вообще-то как раз семибитный и использование 8 бита — различное для разных codepages.
                        • +1
                          Еще для Хрома есть вот такое правило: -webkit-font-smoothing: antialiased;
                          • +3
                            Эта штука какое-то время назад перестала работать Однако, в обсуждении этого бага ровно десять дней назад какой-то добрый человек разместил решение, которое у меня только что заработало!!! Сейчас обновлю статью…

                            Спасибо, что дали повод, который помог найти еще одно решение!
                          • 0
                            Хочу обратить внимание, что есть (если не исправили) ещё 1 существенная проблема со шрифтами — в Opera. Дело в том, что в chrome, к примеру, достаточно подключить 1 файл шрифта с обычным начертанием, а для оперы уже потребуется целых 4 (italic, bold, bold-italic), в противном случае, вместо кириллических букв будет пустые пробелы. Подключение всех начертаний может увеличить размер страницы вдвое, а то и втрое. С точки зрения Opera, в этом нет никакой проблемы (кто бы сомневался)… В то время как chrome и firefox хорошо справлялся с этой задачей и под linux, и под windows.

                            P.S. возможно сия проблема уже решена или была мною не правильно понята.
                            • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              За update вам отдельное спасибо, полезный рецепт!
                              • 0
                                К сожалению, в RDP сеансе всё равно не сглаживается. Даже с последним апдейтом.

                                Не можем побороть, уже руки опускаются.
                                • 0
                                  Да, я это тоже заметил. Думаю, что причина все-таки в RDP клиенте, а не в браузере. Если не секрет, что у Вас задача, которая поставила такие условия?
                                  • 0
                                    Просто большинство работников компании работают в RDP сеансах.

                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.