Сглаживание шрифтов с помощью CSS3-свойства -webkit-font-smoothing
В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus — PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.
На этот раз вопрос будем касаться свойства
-webkit-font-smoothing
. При создании и стилизации HTML-шаблона автор курса Adi Purdila “употребил” это свойство и вкратце сказал, что с ним шрифт будет смотреться лучше.
Конечно, это не объяснение свойства
-webkit-font-smoothing
, поэтому я выкроил специально для этого вопроса время, чтобы разобраться подробнее. Первым делом отправился на htmlbook.ru — незаменимый источник знаний для html-верстальщика.
Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.
Первое — что такое сглаживание шрифтов и зачем оно нужно. Для чего нужно, можно догадаться и так, без всяких ресурсов и статей, ибо само название говорит за себя. Сглаживание шрифтов — это чтобы сделать их начертание на устройстве вывода (монитор и любой другой экран) более плавным. То есть, границы шрифтов становятся гладкими и четкими. Конечно, текст созданный таким шрифтом, читать приятнее и глаза не так устают от подобного процесса.
А вот способ (и это второй момент), с помощью которого достигается такое улучшение начертания шрифтов, не так очевиден. Можно даже сказать больше — он совсем неожиданный. Раньше я случайно пару раз наблюдал такую картину, но мне тогда казалось, что это “глюк” монитора, его неспособность правильно “отрисовать” буквы шрифта.
Теперь-то я знаю, что такое отображение шрифта сделано намеренно, с помощью окрашивания пикселей, расположенных на краях букв, в разные цвета. То есть, получается, что цвет пикселей для всей буквы шрифта неоднородный (допустим — черный), а составлен из нескольких цветов.
Но вот парадокс — человеческий глаз не замечает данного факта, а как раз наоборот — такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:
В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS
-webkit-font-smoothing
можно управлять способом отображения шрифтов по этой технологии в браузерах.
Как видно из браузерного префикса, данное свойство будет работать только под движком WebKit (Chrome, Safari и с недавнего времени — Opera). Но, чтобы свойство
-webkit-font-smoothing
заработало в браузере, в его настройках нужно выставить отображение шрифтов, отличное от стандартов операционной системы Windows.
Поэтому, в браузере Firefox такую настройку можно не искать — ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):
Ну, хватит про браузеры — перейдем к CSS и свойству
-webkit-font-smoothing
75 статья
Я написал две статьи на тему сглаживания шрифтов в WebKit, но к сожалению, с того времени ситуация стала еще хуже. Позволив дизайнерам подбирать свои собственные режимы сглаживания шрифтов через свойство CSS -webkit-font-smoothing, разработчики WebKit открыли возможность злоупотребления форматами текста, отключая субпиксельный рендеринг шрифтов.
Как я уже говорил ранее, WebKit предоставляет дизайнерам три режима сглаживания шрифтов:
- Никакой, в результате чего получается резкий шрифт
- Субпиксельный рендеринг, т.е. стандартный режим сглаживания шрифта, который используется для большинства элементов операционной системы вашего компьютера (мобильные устройства не используют субпиксельный рендеринг, так как они должны поддерживать и вертикальную, и горизонтальную ориентацию экрана)
- Сглаживание, которое отключает субпиксельный рендеринг и сглаживает шрифт на пиксельном уровне, что является противоположностью субпикселям.
Чрезмерное сглаживание
Дизайнеры, которые дорвались до нового свойства, с которым можно поиграться, начали использовать режим сглаживания в своем тексте, даже при крупных текстах темного цвета на светлом фоне. Отключение субпиксельного рендеринга приводит к тому, что текст выглядит иначе, более тонким без малейшего намека на субпиксельное обесцвечивание. По этой причине, на первый взгляд обесцвеченный текст выглядит лучше, чем его субпиксельный вариант. Но при более детальном рассмотрении, сглаженный текст оказывается более размытым, чем в результате субпиксельного рендеринга. Это не дело вкуса, это просто то, как работает рендеринг. Субпиксельный рендеринг использует каждый из трех отдельных субпикселей каждого пикселя на экране чтобы сгладить шрифт и сделать его более резким. Сглаживание основывается только на целых пикселях, что обычно снижает его сглаживание резкости в три раза. На Википедии есть отличная статья о субпиксельном рендеринге, если вы хотите узнать больше о том, как он работает. Вот скриншот двух этих режимов, на котором показан и темный текст на белом фоне, и белый текст на темном фоне: Сглаженный текст выглядит более тонким, и так как в нем меньше пикселей, с которыми можно играть, вместо того, чтобы растекаться в большее количество пикселей, он пытается вписаться в меньшее. К сожалению, если только шрифт не является хорошо оптимизированным, чтобы сохранять каждый пиксель, он будет растекаться на соседние пиксели, в результате чего у него будут размытые края, а также слабый и нечеткий вид. В свою очередь, шрифт с субпиксельным рендерингом будет использовать соседние субпиксели, а не пиксели, что приведет к более чистым, четким краям и более четким линиям. Резкость субпиксельного рендеринга делает большие отрывки текста более читабельными. Светлый текст на темном фоне, как минимум в OS X, это обратный случай. Субпиксельный текст может разливаться и делать шрифт более жирным. В таком случае, сглаживание может оказаться полезным для того, чтобы сделать линии более четкими.
Это не «исправление»
Недавно я просматривал код Skeleton, отличный шаблонный сайт для отзывчивого дизайна, и заметил, что он тоже попал в ловушку сглаживания. Свойство сглаживания шрифта было включено в тело селектора чтобы изменять все на странице, и более того, там был комментарий «Исправление для рендеринга webkit». Режим сглаживания – это не «исправление» для субпиксельного рендеринга, в большинстве случаев это помеха. Субпиксельный рендеринг технически более совершенный, чистый, а также более читабельный, чем сглаживание, потому что используя каждый пиксель, он увеличивает его эффективное разрешение, используемое для сглаживания шрифта, в три раза. Сглаживание может быть полезным в определенных обстоятельствах, как например, для света на темном тексте, но оно абсолютно не может быть заменой субпиксельному рендерингу, и уж тем более «исправлением».
Почему дизайнеры до сих пор неправильно используют это свойство?
У меня есть две теории, почему люди продолжают неправильно использовать сглаживание. Первая – это то, что они слишком сильно фокусируются на элементах страницы просто как на элементах страницы, которые нужно разместить и выстроить. Они строят иерархии элементов при помощи таких инструментов, как уровень контраста, не учитывая в процессе такие моменты, как читабельность текста. Вторая причина исходит из первой и связана с тем, что дизайнер тестирует свой сайт, который он создал, с помощью теста с прищуром, даже не пытаясь именно использовать сайт, читая текст. Давайте более подробно рассмотрим каждую причину.
Ошибка в контрасте
В веб-дизайне контраст является полезным инструментом для создания чувства иерархии между элементами страницы. Высшие уровни контраста остаются для наиболее важных элементов, чтобы они выделялись, в то время, как элементы с меньшей значимостью получают более низкий уровень контраста, что заставляет их сливаться с фоном. Таким образом, дизайнер привлекает внимание пользователя и направляет его к тому, что считается наиболее важным, в то же время отодвигая все остальное на задний план. Распространение размытых светло-серых шрифтов, используемых в тексте, частично относится к неправильному использованию техники контраста. Дизайнер принимает во внимание, что заголовок – это более важная часть, чем автор, дата, и когда он наконец доходит до текста, он придает ему низкий уровень значимости и оформляет в сером цвете с низким контрастом.
Они стараются для скиммера – пользователя, который просматривает контент в поиске нужных элементов, вероятно сканируя перечень заголовков с целью найти желаемую статью, и таким образом снижают значимость самого текста, так как большой кусок текста не является объектом скиммера. Несмотря на то, что применение различных уровней контраста к элементам страницы является довольно важной задачей, основной текст – это особый тип элементов, который в большинстве случаев не подвержен влиянию этой техники. Основной текст должен читаться, а потому в первую очередь он должен быть разборчивым и читабельным. Это подразумевает наличие крупного шрифта, четкого начертания, разработанного для экрана монитора, и нормального уровня контраста. Применение сглаживания вместо субпиксельного рендеринга приводит к тому, что шрифты становятся менее резкими, а снижение контраста с использованием светло-серого цвета делает текст нечитабельным. Неважно, насколько хорошо определена иерархия остальных элементов, если основной контент нечитабелен – дизайн остается неудачным.
Ошибка теста с прищуриванием
Когда дизайнер закончил создавать макет сайта, он тестирует его либо отойдя подальше от монитора, чтобы увидеть его со стороны, либо прищуривая глаза, чтобы увидеть более размытое изображение. Тест с прищуриванием помогает увидеть иерархию, организацию и разделение элементов на странице, замечая, что выделяется и как элементы выглядят при беглом взгляде.
Этот тест удобен для дизайна интерфейса, но он абсолютно бесполезен при тестировании читабельности страницы. Чтобы протестировать читабельность основного текста, вы можете сделать только одно без помощи дополнительных тестеров, а именно – прочитать текст. Отбросьте свой “Lorem ipsum” и заполните текст чем-нибудь реальным, если вы не сделали этого ранее, и когда вы его оформляете, старайтесь именно читать. Я считаю, что лучше всего читать различные отрывки текста при изменении разметки, так как если вы уже раз его прочитали, вы будете знать о чем он, и вам будет слишком легко. Чтобы протестировать читабельность, вам следует попытаться именно читать текст, используя выбранные стили начертания и оформления. В читабельности всегда есть различия, и вы будете постоянно их ощущать. Да, различия довольно слабые, но вы должны иметь возможность понять, улучшили ли ваши изменения что-либо или нет. Дизайнеры, которые только оформляют свой контент, но не читают его, не интересуются тем, читабелен он или нет, им важно только то, хорошо ли он выглядит издалека. Они заботятся только о том, насколько хорошо составлена страница, насколько хорошо выстроены элементы, насколько хорошо они оформлены, и насколько хорошо определена иерархия между ними. Но даже если все это в порядке, незатронутым остается самый важный аспект, который заключается в том, что если текст на странице читабелен, все остальное не имеет значения.
Пожалуйста, прекратите «исправлять» сглаживание шрифтов в WebKit
В общем, это еще одна мольба к дизайнерам, чтобы они прекратили «исправлять» сглаживание шрифтов в WebKit, отключая субпиксельный рендеринг. Вы можете свободно использовать его в светлом тексте на темном фоне, чтобы исправлять стандартный рендеринг в Windows или оформлять особые отрывки текста на странице, чтобы они выглядели более тонкими, но для основной части текста, в которой читабельность – это первостепенное свойство, пожалуйста, оставьте в покое стандартные настройки и дайте возможность операционной системе самой выполнять сглаживание. Это перевод статьи под названием “Please Stop “Fixing” Font Smoothing” от Дмитрия Фадеева. Перевели в компании UXDepot с одобрением издания UsabilityPost. PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста ��
(function(d, s, id) < var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id))
Сглаживание шрифтов
Используйте утилиту subpixel-antialiased для рендеринга текста с использованием субпиксельного сглаживания и утилиту antialiased для рендеринга текста с использованием сглаживания оттенков серого.
subpixel-antialiased
Быстрая коричневая лиса прыгает через ленивую собаку.
antialiased
Быстрая коричневая лиса прыгает через ленивую собаку.
p class="subpixel-antialiased . ">Быстрая коричневая лиса . p> p class="antialiased . ">Быстрая коричневая лиса . p>Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : subpixel-antialiased , чтобы применять утилиту subpixel-antialiased только при hover .
p class="antialiased hover:subpixel-antialiased"> p> Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: subpixel-antialiased , чтобы применить утилиту subpixel-antialiased только на экранах среднего размера и выше.
p class="antialiased md:subpixel-antialiased"> p> Copyright © 2023 Tailwind Labs Inc.
font — smooth
Осторожно! Это свойство нестандартное. Используйте его, только если вам очень нужно добиться изменения сглаживания, и внимательно проверяйте работу в разных браузерах и на разных платформах. В данный момент свойство работает только на macOS. Поддержку можно проверить на Can I use.
Кратко
Скопировать ссылку «Кратко» Скопировано
В разных операционных системах и разных браузерах используются разные механизмы сглаживания шрифта. Браузерные варианты свойства font — smooth позволяют управлять сглаживанием шрифта, пока только в macOS.
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере мы меняем сглаживание текста на всей странице. Поскольку свойство font — smooth нестандартное, каждый браузер реализовал его по-своему: название свойства примерно одинаковое (за исключением префиксов), но значения разные. Несмотря на это, иногда можно получить одинаковые результаты.
body -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;>body -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; >
Сглаживание на экране с низкой плотностью пикселей (1x), без сглаживания и со сглаживанием:
Сглаживание на экране с высокой плотностью пикселей (2x), без сглаживания и со сглаживанием:
Как понять
Скопировать ссылку «Как понять» Скопировано
Большинство экранов состоит из пикселей, каждый из которых — это группа из трёх лампочек разного цвета: красной, зелёной и синей. Эти лампочки редко имеют прямоугольную форму, а некоторые даже не расположены по обычной сетке.
Символы шрифта — это векторные фигуры (глифы), которые при отрисовке нужно так расположить на пикселях экрана, чтобы было максимально похоже на оригинал. Чем сложнее шрифт и тоньше у него линии, тем сложнее их передать «грубыми» пикселями.
Посмотрите, как хвостик у буквы К отрисовывается лесенкой:
Браузеры сглаживают фигуры по-разному, в зависимости от движка, свойств экрана и операционной системы. Например, вот так выглядит текст Font Smoothing шрифтом Italianno в браузере Chrome на Windows (сверху) и на macOS (снизу).
Обратите внимание! Это рендеринг по умолчанию, без применения font — smooth .
Если вы привыкли к Windows, вам покажется знакомым и приятным первое сглаживание, если к macOS — второе. А может быть и наоборот — всё зависит не только от привычки, но и от размера шрифта, цвета текста и фона. То есть нет «правильного» сглаживания, есть сглаживание по умолчанию.
Свойство font — smooth управляет сглаживанием шрифта. Например, значения antialiased (в браузерах идущих от движка WebKit) или grayscale (в Firefox) включает сглаживание оттенками серого. Только в браузерах, идущих от WebKit, можно включить субпиксельное сглаживание.
В полной мере передать изменение сглаживания можно только на макроснимках экрана. Но на первый взгляд включение сглаживания оттенками серого делает рисунок шрифта тоньше, а субпиксельное сглаживание — толще.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Из-за того, что свойство font — smooth не является частью стандарта CSS, каждый браузер реализует его на своё усмотрение.
Поэтому нельзя просто написать font — smooth : antialiased , например. Нужно писать свойство с префиксами:
- -webkit — font — smoothing для браузеров, идущих от движка WebKit (Safari, Chrome, Opera, Edge);
- -moz — osx — font — smoothing для Firefox.
Но на этом сложности не заканчиваются. В каждом из браузеров реализован разный набор значений.
Значения для WebKit
Скопировать ссылку «Значения для WebKit» Скопировано
- auto (по умолчанию) — позволяет браузеру решить, какое сглаживание применять.
- none — отключает сглаживание.
- antialiased — включает сглаживания оттенками серого, когда в сглаживании участвуют целые пиксели, то есть горят все три лампочки.
- subpixel — antialiased — включает субпиксельное сглаживания, когда в сглаживании участвуют части пикселей, то есть некоторые лампочки могут не гореть.
Значения для Firefox
Скопировать ссылку «Значения для Firefox» Скопировано
- auto (по умолчанию) — позволяет браузеру решить, какое сглаживание применять.
- grayscale — сглаживает по аналогии со значением antialiased для WebKit.
Firefox не поддерживает отключение сглаживания или субпиксельное сглаживание.
Примеры значений
Скопировать ссылку «Примеры значений» Скопировано
Чтобы проверить как работают все комбинаций свойств и значений, мы собрали даже те, которые не работают вместе:
.none -webkit-font-smoothing: none; -moz-osx-font-smoothing: none;> .grayscale -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;> .subpixel -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: subpixel-antialiased;>.none -webkit-font-smoothing: none; -moz-osx-font-smoothing: none; > .grayscale -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; > .subpixel -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: subpixel-antialiased; >
Демо в Chrome: значение none отключает сглаживание совсем.
Демо в Firefox: значение none просто не работает.
Особенности применения
Скопировать ссылку «Особенности применения» Скопировано
Идея включить одинаковое сглаживание шрифтов в вашем дизайне на всех устройствах, на первый взгляд, кажется отличной. Однако стоит учитывать важные особенности: привычки пользователей, браузерную поддержку и контраст с фоном.
Привычки пользователей
Скопировать ссылку «Привычки пользователей» Скопировано
Если вы попытаетесь привести сглаживание шрифта привычному на Windows или принятому в графическом редакторе, вы можете не учесть, что все остальные тексты в браузере и за его пределами будут по-прежнему сглаживаться так, как принято по умолчанию в операционной системе. Это может вызвать дискомфорт и сложности с чтением.
Браузерная поддержка
Скопировать ссылку «Браузерная поддержка» Скопировано
Свойство font — smooth совсем не работает на Windows, Android и даже iOS.
Chrome на Windows:
Firefox на Windows:
Контраст с фоном
Скопировать ссылку «Контраст с фоном» Скопировано
При включении сглаживания оттенками серого (самое частое применение), рисунок шрифта становится заметно тоньше, что уменьшает его контрастность, особенно на тёмном фоне. Об этом стоит помнить, создавая тёмные темы. Но аналогично может просесть и контрастность на белом фоне при небольших размерах шрифта или изначально неконтрастном цвете текста.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Важно ещё раз акцентировать внимание, что это свойство — не часть стандарта. Оно реализуется и поддерживается по инициативе браузеров и может измениться или пропасть в любой момент.
�� Свойство совсем не работает ни в одном из браузеров на Windows, Android и iOS.