При осуществлении этой казалось бы простой для современного веба задачи была поймана пара интересных и неочевидных граблей, о которых хотелось бы рассказать
КДПВ, она же грабли #1
Как оказалось, выбранный шрифт выглядел, мягко говоря, очень плохо, если на компьютере выключено сглаживание неровностей экранных шрифтов.
В windows, к примеру, за такое отвечает вот эта галочка:
К сожалению сказать всем пользователям — а ну-ка включите у себя эту галочку — представляется невозможным, поэтому было решено идти по другому пути — для пользователей с отключенным сглаживанием шрифтов использовать вместо нового шрифта проверенный Arial.
Для того чтобы это сделать помощью js, определяем, включено ли в системе сглаживание шрифтов, и если нет, то навешиваем на body спец. класс и переопределяем стили.
Само определение и его объяснение есть к примеру у Zoltan Hawryluk.
Идея там весьма несложная — рисуем текст на canvas и проверяем потом, есть ли там символы с полупрозрачностью. Кстати, эту проверку предлагали добавить в Modernizr, но реквест отклонили.
Грабли номер 2 выглядят к примеру так:
А иногда несколько иначе: еще были варианты не жирного, но какого-то растянутого шрифта и просто слегка другого.
Во всех случаях причина была одна — установленный локально шрифт.
Изначально мы подключили шрифты с помощью css напрямую с google fonts
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
И там примерно такой css:
@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 400;
src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYoK-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Решение — забираем css к себе и убираем из него local:
@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYoK-4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
После этих несложных изменений все пользователи стали счастливы.
(кроме тех кому не понравился новый шрифт — но это уже не технический вопрос и пусть холивар какие шрифты лучше и красивее остается за рамками этой статьи)
Комментарии (20)
gnomeby
07.03.2018 20:45Как часто бывает нестандартная конфигурация системы?
darvecher Автор
07.03.2018 21:35Отключенное сглаживание оказалось часто. Проценты не считали, но жалоб было много — судя по всему это весьма распространенная штука на рабочих компьютерах
Goodkat
07.03.2018 23:47Знаю несколькo человек, которые специально отключают сглаживание шрифтов.
В принципе, на экранах высокой чёткости сглаживание уже и не нужно.
dima_borov
07.03.2018 22:23Когда пользователь Windows ищет дополнительного быстродействия в доступных настройках. Думаю, это нередкий кейс. Шаги для воспроизведения (скриншот): c2n.me/3StHRPH
Fox_exe
08.03.2018 13:20Уже дважды сглаживание выключалось само после какихто-там обновлений Windows 10…
Goodkat
07.03.2018 21:45Спасибо за статью, меня шрифты на телефоне полностью устраивают, поэтому добавил fonts.gstatic.com 0.0.0.0 в настройки DNS.
EndUser
08.03.2018 10:00Да, у меня при любых настройках ClearType и прочих Font Anti-aliasing большинство шрифтов так или иначе начинает резать глаз — или расплываются на красно-зелёный, или покрываются размытыми серыми каплями… Лет десять как. Поэтому я очень люблю и уважаю растровые шрифты, типа MS Core Fonts и выключенные эффекты сглаживания.
Особенно тяжело бы мне давалось разглядывание кода, где нужно постоянно обращать внимание на мелочи — O0,.
Мой путь — к чёрту смыливание, к чёрту Хром, который никогда не умел и никогда не сумеет работать в растре нормально, к чёрту смазанные шрифты. Tahoma в системе, Verdana в вебе, LucidaConsole/PTMono/ProggySZ в коде! Calibri/Consolas выжигаю как могу. А поскольку вебщики не идут навстречу, режу шрифты сам в Firefox.gnomeby
08.03.2018 11:28Вам просто нужен дисплей с повышенной плотностью пикселя, типа Retina.
mSnus
08.03.2018 16:49Просто — это сколько в рублях нынче за 24" хотя бы?
gnomeby
08.03.2018 17:10Поищите, я в другой стране, в ваших ценах и точках поиска не разбираюсь.
За себя только могу сказать, что если бы я был человеком со специфическим восприятием сглаженных шрифтов, а такие люди есть, то я бы обязательно поставил себе цель перейти на ретиноподобный дисплей, на котором сглаживание не нужно, а выглядит всё так как задумывали авторы сайтов и различных приложений.
HueyOne
09.03.2018 13:12Недавно, пару лет назад, вконтакт перешел на абсолютно блевотный шрифт. Теперь большинство сайтов ринулись вслед за ним. И только на хабре со шрифтами (пока) все в порядке...
Научите, что в браузере настроить, чтобы шрифт везде был, например, как в системе? Четкий, ровный, без мыла, но со сглаживанием.
sumanai
09.03.2018 14:04Отключить «Разрешить страницам использовать свои шрифты» в Firefox и убить все шрифтовые иконки. Или тщательно настраивать каждый сайт при помощи юзерстилей.
HueyOne
09.03.2018 21:10Мне бы про хромобраузеры.
Вот пример абсолютно дегенеративной рвотной работы современных «дизайнеров», видно, что шрифт в теме четкий, ровный, а в шапке новомодный, обвел желтым:
gnomeby
09.03.2018 21:18У вас выключено сглаживание, а у него включено и он об этом не задумывается. А что здесь такого? Это какой-то ресурс, который зарабатывает деньги на удержании на орумах как можно большего числа пользователей? Врядли.
sumanai
09.03.2018 21:36а у него включено и он об этом не задумывается.
Вообще-то задумываюсь, и потратил весьма много времени на доводку, так как FF пару обновлений назад опять всё сломал на XP, врубив skia вместо cairo по умолчанию. Это я не сразу выяснил, пришлось перекопать кучу настроек, связанных со шрифтами.
sumanai
09.03.2018 21:33Мне бы про хромобраузеры.
Любую проблему хрома можно решить, установив FireFox. Хром просто не имеет нужных настроек.
Вообще, у меня в этом FF настроено так, что основные шрифты, написанные в благодатные времена ручной привязки к пикселям, отображаются без сглаживания, а новомодное дешёвое поточное говно идёт с монохромным сглаживанием. В итоге и глаза не ест, и чаще всего основной текст выглядит отлично, вот
Заголовок спойлера
HueyOne
09.03.2018 21:53Мне не нравится «размыливание» шрифта на синеватом фоне.
Я бы хотел иметь возможность в браузере принудительно все шрифты заменить на свои, как это можно было в старой опере. Сейчас ЯБ…sumanai
10.03.2018 01:16Выше я описал решения, уверен, что в вашем ЯБ есть какой-нибудь блокировщик рекламы, в которй можно прописать запрет всех расширений файлов шрифтов, но это даст свои очевидные косяки. Сейчас много где используют шрифтовые иконки, и при принудительной замене всех шрифтов на свои вы получите в лучшем случае квадраты на месте иконок, а в худшем полную белиберду.
Semmaz
Уверены что все?