Свойство CSS: font-family

Название шрифта. Это может быть отдельный шрифт или список, разделённый запятыми, из которых браузер применит первый попавшийся шрифт (например, установленный на компьютере пользователя).

Семейство шрифтов также может быть указано как часть font свойства shorthand.

Возможные значения

[Семейство шрифтов]

Значение: [Семейство шрифтов]
Описание: название шрифта. Шрифты не зависят от CSS и должны быть либо установлены на компьютере пользователя, либо загружены для CSS, чтобы захватить их и применить.
Пример: Helvetica.

serif

Значение: serif.
Описание: общее семейство шрифтов. Шрифт с засечками, например Times или Times New Roman.

sans-serif

Значение: sans-serif.
Описание: общее семейство шрифтов. Шрифт без засечек, такой как Arial или Helvetica.

monospace

Значение: monospace.
Описание: общее семейство шрифтов. Шрифт фиксированной ширины, например Courier.

cursive

Значение: cursive.
Описание: общее семейство шрифтов. Плавный шрифт, как у Zapf Chancery.

fantasy

Значение: fantasy.
Описание: общее семейство шрифтов. Шрифт Daft, похожий на Papyrus.

[Несколько семейств шрифтов]

Значение: [Несколько семейств шрифтов].
Описание: разделённый запятыми список названий семейств шрифтов. Браузер применит первый шрифт в этом списке, который можно применить. Helvetica, Arial, sans-serif

inherit

Значение: inherit.

initial

Значение: initial.

unset

Значение: unset.

Названия шрифтов, состоящие более чем из одного слова, следует заключать в кавычки.

font-family: "Times New Roman"

Хотя вполне допустимо использовать названия семейств шрифтов serif, sans-serif monospace, cursive, fantasy, они разработаны как запасной вариант на случай, если предыдущие семейства шрифтов не распознаются. Желательно использовать их в конце списка с несколькими семействами шрифтов.

Пример

body { font-family: Helvetica, Arial, sans-serif; }
blockquote { font-family: Times, "Times New Roman", serif; }

Страницы в тему:

Все свойства CSS

all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index

Добавить комментарий