Сглаживание шрифтов с помощью CSS3-свойства -webkit-font-smoothing

Reading time ~4 minutes

В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus - PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.

На этот раз вопрос будем касаться свойства 

1

-webkit-font-smoothing
. При создании и стилизации HTML-шаблона автор курса Adi Purdila “употребил” это свойство и вкратце сказал, что с ним шрифт будет смотреться лучше.

Конечно, это не объяснение свойства 

1

-webkit-font-smoothing
, поэтому я выкроил специально для этого вопроса время, чтобы разобраться подробнее. Первым делом отправился на htmlbook.ru - незаменимый источник знаний для html-верстальщика.

Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.

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

А вот способ (и это второй момент), с помощью которого достигается такое улучшение начертания шрифтов, не так очевиден. Можно даже сказать больше - он совсем неожиданный. Раньше я случайно пару раз наблюдал такую картину, но мне тогда казалось, что это “глюк” монитора, его неспособность правильно “отрисовать” буквы шрифта.

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

Но вот парадокс - человеческий глаз не замечает данного факта, а как раз наоборот - такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:

Увеличенная буква шрифта с эффектом сглаживания

В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS 

1

-webkit-font-smoothing
можно управлять способом отображения шрифтов по этой технологии в браузерах.

Как видно из браузерного префикса, данное свойство будет работать только под движком WebKit (Chrome, Safari и с недавнего времени - Opera). Но, чтобы свойство 

1

-webkit-font-smoothing
заработало в браузере, в его настройках нужно выставить отображение шрифтов, отличное от стандартов операционной системы Windows.

Поэтому, в браузере Firefox такую настройку можно не искать - ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):

Настройка Safari для управления сглаживанием шрифта

Ну, хватит про браузеры - перейдем к CSS и свойству 

1

-webkit-font-smoothing
, ради которого и затеялась данная статья. Это свойство может принимать три значения:

  • 1

    none
    - сглаживание вообще отключено;
  • 1

    antialiased
    - средняя степень сглаживания;
  • 1

    subpixel-antialiased
    - сильная степень сглаживания.

И ниже приведу все три примера отображения текста в браузере Safari для каждого из значений свойства 

1

-webkit-font-smoothing
. Но сначала установлю настройку сглаживания шрифта в этом браузере на “Среднее - оптимально для плоских экранов”:

Три примера отображения -webkit-font-smoothing в Safari

Для первого случая 

1

-webkit-font-smoothing: none
это вообще жуть - ничего не читается совсем, поэтому отбрасываем и забываем о нем (в браузерах Firefox, Chrome и других все будет отображаться правильно, ибо они не имеют подобной настройки, как Safari).

Второй случай 

1

-webkit-font-smoothing: antialiased
выглядит очень привлекательно - начертание сглаженное и четкое одновременно, приятно читать.

Третий случай 

1

-webkit-font-smoothing: subpixel-antialiased
похож на второй, но текст выглядит немного жирным, что не так приятно, как в предыдущем случае.

Вывод: 

1

-webkit-font-smoothing: antialiased
- это наш выбор. Другое дело, что применение этого свойства ограничено только браузерами на движке WebKit. И помимо этого, мало кто из пользователей знает о возможности управления отображением сглаженного шрифта в браузерах такого типа.

Из браузерного префикса 

1

-webkit-
ясно, что основное свойство 
1

font-smoothing
только в проекте. Конечно, статья “Сглаживание шрифтов в Safari” была написана в далеком 2011 году, за это время может все измениться. Но как обстоят дела на сегодняшний день, я сказать не могу, ибо времени выяснить такой вопрос у меня пока нет. Но, судя по тому, как добавлял свойство 
1

-webkit-font-smoothing
в HTML-шаблон автор Adi Purdila:

-webkit-font-smoothing: antialiased;

… дела ушли не намного вперед.

На этом все.

Read More

Ошибка с версией Node.js

Довольно часто в своей практике сталкиваюсь с такой ошибкой, когда запускаю локально сторонний проект:```bash$ npm run start> dom-moving-...… Continue reading

Mangling Angular

Published on February 15, 2024

Constructor parameter without access modifier

Published on February 04, 2024