В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus - PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.
На этот раз вопрос будем касаться свойства
. При создании и стилизации HTML-шаблона автор курса Adi Purdila “употребил” это свойство и вкратце сказал, что с ним шрифт будет смотреться лучше.1
-webkit-font-smoothing
Конечно, это не объяснение свойства
, поэтому я выкроил специально для этого вопроса время, чтобы разобраться подробнее. Первым делом отправился на htmlbook.ru - незаменимый источник знаний для html-верстальщика.1
-webkit-font-smoothing
Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.
Первое - что такое сглаживание шрифтов и зачем оно нужно. Для чего нужно, можно догадаться и так, без всяких ресурсов и статей, ибо само название говорит за себя. Сглаживание шрифтов - это чтобы сделать их начертание на устройстве вывода (монитор и любой другой экран) более плавным. То есть, границы шрифтов становятся гладкими и четкими. Конечно, текст созданный таким шрифтом, читать приятнее и глаза не так устают от подобного процесса.
А вот способ (и это второй момент), с помощью которого достигается такое улучшение начертания шрифтов, не так очевиден. Можно даже сказать больше - он совсем неожиданный. Раньше я случайно пару раз наблюдал такую картину, но мне тогда казалось, что это “глюк” монитора, его неспособность правильно “отрисовать” буквы шрифта.
Теперь-то я знаю, что такое отображение шрифта сделано намеренно, с помощью окрашивания пикселей, расположенных на краях букв, в разные цвета. То есть, получается, что цвет пикселей для всей буквы шрифта неоднородный (допустим - черный), а составлен из нескольких цветов.
Но вот парадокс - человеческий глаз не замечает данного факта, а как раз наоборот - такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:
В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS
можно управлять способом отображения шрифтов по этой технологии в браузерах.1
-webkit-font-smoothing
Как видно из браузерного префикса, данное свойство будет работать только под движком WebKit (Chrome, Safari и с недавнего времени - Opera). Но, чтобы свойство
заработало в браузере, в его настройках нужно выставить отображение шрифтов, отличное от стандартов операционной системы Windows.1
-webkit-font-smoothing
Поэтому, в браузере Firefox такую настройку можно не искать - ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):
Ну, хватит про браузеры - перейдем к CSS и свойству
, ради которого и затеялась данная статья. Это свойство может принимать три значения:1
-webkit-font-smoothing
- сглаживание вообще отключено;1
none
- средняя степень сглаживания;1
antialiased
- сильная степень сглаживания.1
subpixel-antialiased
И ниже приведу все три примера отображения текста в браузере Safari для каждого из значений свойства
. Но сначала установлю настройку сглаживания шрифта в этом браузере на “Среднее - оптимально для плоских экранов”:1
-webkit-font-smoothing
Для первого случая
это вообще жуть - ничего не читается совсем, поэтому отбрасываем и забываем о нем (в браузерах Firefox, Chrome и других все будет отображаться правильно, ибо они не имеют подобной настройки, как Safari).1
-webkit-font-smoothing: none
Второй случай
выглядит очень привлекательно - начертание сглаженное и четкое одновременно, приятно читать.1
-webkit-font-smoothing: antialiased
Третий случай
похож на второй, но текст выглядит немного жирным, что не так приятно, как в предыдущем случае.1
-webkit-font-smoothing: subpixel-antialiased
Вывод:
- это наш выбор. Другое дело, что применение этого свойства ограничено только браузерами на движке WebKit. И помимо этого, мало кто из пользователей знает о возможности управления отображением сглаженного шрифта в браузерах такого типа.1
-webkit-font-smoothing: antialiased
Из браузерного префикса
ясно, что основное свойство 1
-webkit-
только в проекте. Конечно, статья “Сглаживание шрифтов в Safari” была написана в далеком 2011 году, за это время может все измениться. Но как обстоят дела на сегодняшний день, я сказать не могу, ибо времени выяснить такой вопрос у меня пока нет. Но, судя по тому, как добавлял свойство 1
font-smoothing
в HTML-шаблон автор Adi Purdila:1
-webkit-font-smoothing
… дела ушли не намного вперед.
На этом все.