Найти в Дзене
toTake

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

Я расскажу о способе при котором сам браузер распознает букву и определяет для нее шрифт. В результате мы получим: для такой разметки: вот такой результат: Этот способ базируется на: Все выше правила взяты из стандарта - CSS Fonts Module Level 4. Один и тот же шрифт может быть написан курсивным или жирным начертаниями. Поэтому и говорят что шрифт обладает лицами т.е faces. Отсюда и правило `@font-face` которое определяет одно такое лицо, например курсивное. Пример на codepen

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

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

-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