CSS Fonts

CSS Fonts - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько

Базовый пример

Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.

p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}

<p>Three hundred years ago<br>
  I thought I might get some sleep<br>
  I stretched myself out onna antique bed<br>
  An' my spirit did a midnite creep</p>

Вывод на экран будет следующим:

Различные примеры шрифтов

Вы можете найти множество вариантов шрифтов на v-fonts.com и axis-praxis.org; так же смотрите наше руководство Variable fonts (en-US) для большей информации по использованию.

Отсылки

Properties

At-rules

@font-face
font-family

Руководство

Fundamental text and font styling

В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.

OpenType font features guide (en-US)

Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня font-feature-settings (en-US). В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.

Variable fonts guide (en-US)

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.

Specifications

Specification Status Comment
CSS Fonts Module Level 4 Рабочий черновик Adds font-variation-settings (and related higher-level properties) and font-optical-sizing.
CSS Fonts Module Level 3 Рекомендация Adds font-feature-settings (and related higher-level properties)
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация Initial definition