Найти тему
toTake

Каждой букве свой шрифт с нативной поддержкой браузера

Я расскажу о способе при котором сам браузер распознает букву и определяет для нее шрифт. В результате мы получим:

для такой разметки:

-2

вот такой результат:

-3

Этот способ базируется на:

  • правиле `@font-face`
  • директиве`font-family`, размещаем внутри `@font-face`
  • директиве `src`, размещаем внутри `@font-face`
  • директиве `unicode-range`, размещаем внутри `@font-face`
-4
Все выше правила взяты из стандарта - CSS Fonts Module Level 4.

Один и тот же шрифт может быть написан курсивным или жирным начертаниями. Поэтому и говорят что шрифт обладает лицами т.е faces. Отсюда и правило `@font-face` которое определяет одно такое лицо, например курсивное.

Пример на codepen