Почему шрифты в Хроме на Виндоусе — гавно?

Обновление от 22.09.2017: С этого поста начинается блог, который расположен на igoradamenko.com. Все посты старше этого перенесены из прошлых моих блогов. Они старенькие и детские, так что отнеситесь к ним с уважением :-)

Обновление от 19.08.2015: Сейчас во всех браузерах на основе Хромиума по умолчанию включён DirectWrite (поэтому даже во флагах настройку переименовали в «Отключить DirectWrite»), что, в принципе, значительно улучшает отрисовку шрифтов. А значит статья более неактуальна.

Когда-то кому-то я сказал, что как только запущу новый блог, первая заметка будет именно такой. Да будет так.

Предыстория

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

Что же не так?

Если вы посмотрите на шрифты с разных браузеров, в числе которых будет Хром, вы поймаете ту самую разницу в их отрисовке. Смотрите внимательно. Первый скриншот везде Хром, второй — Фаерфокс. Статья в Википедии (обратите внимание за заголовок):

Сайт со шрифтами от Гугла:

Лента.ру (обратите внимание на букву «С»):

И, наконец, сайт, на котором вроде как шрифты должны отображаться наиболее нормально, если вы сидите с Виндоуса. Ванноут от Майкрософта:

Сперва вам будет казаться, что на втором скриншоте (в Фаерфоксе) просто чуть более яркий шрифт. Присмотревшись получше вы поймёте, что в Хроме он как бы «квадратный».

Кто виноват?

Всё дело в сглаживании. В Фаерфоксе оно намного лучше, чем в Хроме, и естественно, виноваты именно разработчики Хрома, то есть Гугл.

А ещё вполне может быть такое, что вы используете некачественно сконвертированные шрифты. Если вдруг вы решили использовать какой-то никому не известный шрифт (нарушив на него лицензию, конечно же), то явно ваш верстальщик (или вы сами) подыскали какой-нибудь конвертер шрифтов, который на выходе выложил вам все возможные форматы, но в плохом качестве. В таком случае я могу вам посоветовать fontsquirrel.com. У них отличный конвертер, но есть ограничение на конвертацию некоторых шрифтов (из-за нарушения лицензии).

Что делать?

Зависит от того, кто вы? Разработчик или клиент?

Если вы клиент, то..

Идеальный выход для вас — не использовать такие шрифты вообще. Скажите дизайнеру, чтобы он воспользовался стандартными, или теми, которые есть на google.com/fonts. Они наиболее хорошо отображаются во всех браузерах.

Или же покупайте используемые шрифты. Большинство шрифтовиков сейчас сразу делают веб-версии, которые даже можно купить отдельно. Этот вопрос вам лучше обсудить с дизайнером и разработчиком.

Если вы разработчик, то..

Объясните клиенту, почему не стоит пользоваться никому не известными гарнитурами.

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

И не забывайте о том, что если кастомный шрифт используется только в нескольких местах (логотип и описание, например), то вы всегда можете поступить так же, как и ребята из Эпл. У них большая часть заголовков вставляется просто изображением. И все рады.

На сладкое

Сейчас (с версии 35) в Хроме на Виндоусе, и всех браузерах на его основе можно включить галочку в chrome://flags под названием «Включить DirectWrite». После перезагрузки браузера вы увидите очень сильные изменения в сглаживании, благодаря которым шрифты примерно от 16 пикселей и выше будут отлично отрисовываться. Почти как в Фаерфоксе. Зато все те, что размером поменьше станут отвратительно замыленными и кривыми. Особенно это заметно, например, в чате ВКонтакте.

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

2014
Популярное