Тип CSS `<generic-family>`

<generic-family> CSS тип данных представляет ключевые слова для универсальных семейств шрифтов, используемых в сокращённом свойстве font и полном свойстве font-family. <generic-family> представляет один или несколько локально установленных шрифтов, принадлежащих к этой категории.

Синтаксис

Значения

Перечисляемый тип <generic-family> задаётся одним из перечисленных ниже значений:

serif

Засечка — это небольшая линия или штрих, присоединённые к концу более крупного штриха в букве. В шрифтах с засечками глифы имеют завершающие штрихи с расширяющимися или сужающимися концами. Примеры: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio и URW Palladio.

sans-serif

Шрифт без засечек; глифы имеют простые окончания штрихов без украшений. Примеры шрифтов без засечек: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans и Nimbus Sans L.

monospace

Все глифы имеют одинаковую фиксированную ширину. Примеры моноширинных шрифтов: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco и Lucida Console.

cursive

Глифы в курсивных шрифтах обычно используют рукописный стиль или другой почерковый стиль; в результате текст больше похож на рукописный, выполненный пером или кистью, чем на печатный набор. В CSS термин «cursive» применяется к шрифтам для любых письменностей, в том числе тех, в которых буквы не соединяются. Примеры курсивных шрифтов: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting и Apple Chancery.

fantasy

Декоративные шрифты, содержащие причудливые изображения символов. Примеры таких шрифтов: Papyrus, Herculanum, Party LET, Curlz MT, Harrington и Comic Sans MS.

system-ui

Глифы берутся из стандартного шрифта пользовательского интерфейса на данной платформе. Поскольку типографические традиции в разных частях мира существенно различаются, это универсальное семейство предназначено для гарнитур, которые нельзя однозначно отнести к другим семействам.

Примечание: Как следует из названия, system-ui предназначен для того, чтобы элементы пользовательского интерфейса выглядели как в нативных приложениях, а не для набора больших абзацев текста. Для некоторых пользователей отображаемая гарнитура может оказаться нежелательной: например, стандартный шрифт CJK в Windows может плохо отображать латиницу, а атрибут lang может не влиять на отображаемый шрифт. Некоторые операционные системы не позволяют настраивать system-ui, тогда как браузеры обычно позволяют настраивать семейство шрифтов sans-serif. Для больших абзацев используйте sans-serif или другое семейство шрифтов, не предназначенное для интерфейса.

ui-serif

Стандартный шрифт пользовательского интерфейса с засечками. См. определение serif выше.

ui-sans-serif

Стандартный шрифт пользовательского интерфейса без засечек. См. определение sans-serif выше.

ui-monospace

Стандартный моноширинный шрифт пользовательского интерфейса. См. определение monospace выше.

ui-rounded

Стандартный шрифт пользовательского интерфейса с округлыми формами.

math

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

fangsong

Особый стиль китайских иероглифов, сочетающий черты стилей Song с засечками и Kai, напоминающего курсив. Этот стиль часто используется в государственных документах.

Формальный синтаксис

<generic-family> = serif | sans-serif | monospace | cursive | fantasy | system-ui | ui-serif | ui-sans-serif | ui-monospace | ui-rounded | math | fangsong

Примеры

В этом примере показано несколько перечисляемых значений <generic-family> для свойства font-family.

HTML

<ul>
  <li class="serif">serif</li>
  <li class="sans-serif">sans-serif</li>
  <li class="monospace">monospace</li>
  <li class="cursive">cursive</li>
  <li class="fantasy">fantasy</li>
  <li class="system-ui">system-ui</li>
</ul>

CSS

ul {
  font-size: 1.5rem;
  line-height: 2;
}
.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}
.system-ui {
  font-family: system-ui;
}

Результат

Спецификации

См. также

• Свойства, использующие этот тип данных: font-family и font
• Модуль CSS Fonts