font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

HTML5 CSS2.1 IE Cr Op Sa Fx

     h1 < font-family: Geneva, Arial, Helvetica, sans-serif; >p Duis te feugifacilisi
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Читайте также: Блочная модель в CSS3

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(» elementID «).style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

font — family

С помощью font — family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например «Arial». А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans — serif .

Пример

Скопировать ссылку «Пример» Скопировано

Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:

 body  font-family: "PT Sans", "Arial", sans-serif;> body  font-family: "PT Sans", "Arial", sans-serif; >

Как понять

Скопировать ссылку «Как понять» Скопировано

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font — family можно задать любой шрифт для любого текстового элемента на странице.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Обычно в font — family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

Значения

Скопировать ссылку «Значения» Скопировано

Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
- serif — шрифт с засечками, например, «Times».
- sans — serif — шрифт без засечек, например, «Arial».
- monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
- cursive — курсивный шрифт или italic.
- fantasy — декоративный шрифт.
- system — ui — использует стандартный шрифт на устройстве пользователя.
Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

Зададим разные шрифты для заголовков и для основного текста:
```
 Этот заголовок написан шрифтом Roboto без засечекА параграф — шрифтом Roboto Slab с засечками.  Для второго заголовка установлено семейство sans-serif Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.  h1>Этот заголовок написан шрифтом Roboto без засечекh1> p>А параграф — шрифтом Roboto Slab с засечками.p> div class="generic"> h2>Для второго заголовка установлено семейство sans-serifh2> p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.p> div>      
```
```
 h1  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;> p  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;> .generic h2  font-family: sans-serif;> .generic p  font-family: serif;> h1  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif; > p  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif; > .generic h2  font-family: sans-serif; > .generic p  font-family: serif; >      
```
Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Мы советуем использовать не больше трёх разных семейств шрифтов на одной странице. Например, один для заголовков, другой для обычного текста и третий для подписей.

💡 Не забывай добавлять желаемый тип шрифта ( serif , sans — serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font — face .

🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:

Это нужно на случай, если кастомный шрифт по какой-то причине не загрузился на устройстве пользователя. Если не указывать альтернативу (так называемый фолбэк), то при незагрузке кастомного шрифта дизайн страницы скорее всего полностью сломается. Если указать альтернативный системный шрифт, максимально близкий к кастомному по внешнему виду, то дизайн останется прежним 🎉

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

Источник

font-family¶

Свойство font-family устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.

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

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания.

Демо¶
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
Синтаксис¶
```
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
```
```
/* A font family name and a generic family name */ font-family: Gill Sans Extrabold, sans-serif; font-family: 'Goudy Bookletter 1911', sans-serif; /* A generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; /* Global values */ font-family: inherit; font-family: initial; font-family: unset; 
```
Значения¶

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

serif шрифты с засечками (антиквенные), типа Times ; sans-serif рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial ; cursive курсивные шрифты; fantasy декоративные шрифты; monospace моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier ).

Значение по-умолчанию: Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman .

Применяется ко всем элементам

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

Описание и примеры¶
```
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
```
```
 html> head> meta charset="utf-8" /> title>font-familytitle> style> h1  font-family: Geneva, Arial, Helvetica, sans-serif; > p  font-family: Georgia, 'Times New Roman', Times, serif; > style> head> body> h1>Танцыh1> p> Венгры страстно любят танцевать, особенно ценятся национальные танцы p> body> html> 
```
Источник

font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
- serif — шрифты с засечками (антиквенные), типа Times;
- sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
- cursive — курсивные шрифты;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
HTML5 CSS2.1 IE Cr Op Sa Fx
```
     h1 < font-family: Geneva, Arial, Helvetica, sans-serif; >p Duis te feugifacilisi
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  
```
Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-family

Объектная модель
[window.]document.getElementById(» elementID «).style.fontFamily
Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

font-family

CSS дескриптор font-family позволяет авторам указывать font family для шрифта, указанного в правиле @font-face .

Связано с @-правила @font-face

Начальное значение n/a (required)

Обработка значения как указано

Синтаксис
```
/* значения */ font-family: "font family"; font-family: 'another font family'; /* значение */ font-family: examplefont; 
```
Значения

Указывает имя font family.

Синтаксис

Примеры
```
@font-face  font-family: examplefont; src: url('examplefont.ttf'); > 
```
Спецификации

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 13 авг. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Связано с @-правила	@font-face
Начальное значение	n/a (required)
Обработка значения	как указано

font-family

font-family

Синтаксис

Значения

Duis te feugifacilisi

Объектная модель

Браузеры

font — family

Пример

Как понять

Как пишется

Значения

Ещё пример

Этот заголовок написан шрифтом Roboto без засечек

Для второго заголовка установлено семейство sans-serif

Подсказки

На практике

Алёна Батицкая советует

font-family¶

Демо¶

Синтаксис¶

Значения¶

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

Описание и примеры¶

font-family

Синтаксис

Значения

Duis te feugifacilisi

Объектная модель

Браузеры

font-family

Синтаксис

Значения

Синтаксис

Примеры

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

Поддержка браузерами

Found a content problem with this page?

MDN

Support

Our communities

Developers