Все семейства шрифтов css

CSS Шрифты

Выбор правильного шрифта для вашего сайта очень важен!

Выбор шрифта важен

Выбор правильного шрифта оказывает огромное влияние на то, как читатели воспринимают веб-сайт.

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

Важно использовать шрифт, который легко читается. Шрифт придает ценность вашему тексту. Также важно выбрать правильный цвет и размер текста для шрифта.

Общие семейства шрифтов

В CSS существует пять общих семейств шрифтов:

1. Serif шрифты — имеют небольшую обводку по краям каждой буквы. Они создают ощущение официальности и элегантности.
2. Sans-serif шрифты — имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный внешний вид.
3. Monospace шрифты — все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
4. Cursive шрифты — имитируют человеческий почерк.
5. Fantasy шрифты — это декоративные/игривые шрифты.

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

Разница между шрифтами с засечками и без засечек

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

Все CSS свойства шрифтов

Общее семейство шрифтов	Примеры названий шрифтов
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

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

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

Примечание: Если название шрифта состоит более чем из одного слова, оно должно быть заключено в кавычки, например: «Times New Roman».

Совет: Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы, чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Начните с нужного вам шрифта и заканчивайте общим семейством (чтобы позволить браузеру выбрать аналогичный шрифт в общем семействе, если другие шрифты недоступны). Названия шрифтов должны быть разделены запятой. Подробнее о резервных шрифтах читайте в следующй главе.

Пример

Укажите несколько разных шрифтов для трех параграфов:

.p1 <
font-family: «Times New Roman», Times, serif;
>

.p2 font-family: Arial, Helvetica, sans-serif;
>

.p3 font-family: «Lucida Console», «Courier New», monospace;
>

Источник

CSS Fonts

Choosing the right font for your website is important!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts — here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Tip: The font-family property should hold several font names as a «fallback» system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.

Example

Specify some different fonts for three paragraphs:

.p1 <
font-family: «Times New Roman», Times, serif;
>

.p2 font-family: Arial, Helvetica, sans-serif;
>

.p3 font-family: «Lucida Console», «Courier New», monospace;
>

Источник

Стандартные и безопасные шрифты CSS

Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).

Чтобы сайт в любой операционной системе открывался одинаково, принято в CSS-свойстве font-family задавать несколько названий шрифтов, перечисленных через запятую.

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

Список безопасных шрифтов:

‘Times New Roman’, Times, serif	Съешь же ещё этих мягких французских булок
Georgia, serif	Съешь же ещё этих мягких французских булок
Arial, Helvetica, sans-serif	Съешь же ещё этих мягких французских булок
‘Arial Black’, Gadget, sans-serif	Съешь же ещё этих мягких французских булок
Verdana, Geneva, sans-serif	Съешь же ещё этих мягких французских булок
‘Trebuchet MS’, Helvetica, sans-serif	Съешь же ещё этих мягких французских булок
Impact, Charcoal, sans-serif	Съешь же ещё этих мягких французских булок
‘Comic Sans MS’, cursive, sans-serif	Съешь же ещё этих мягких французских булок
‘Courier New’, Courier, monospace	Съешь же ещё этих мягких французских булок

Далее о каждом шрифте подробнее:

Times New Roman

Источник

Как установить стиль шрифта. CSS-свойство font

Свойство font используется для оформления текста на сайте. Оно позволяет задавать различные атрибуты шрифта: размер, начертание, жирность, стиль и цвет.

Свойство в общем виде записывается так:

font-family — устанавливает семейство шрифтов.

font-style — задаёт стиль шрифта.

font-variant — определяет вариант шрифта.

font-weight — задаёт жирность шрифта.

font-size — указывает размер шрифта.

line-height — задаёт высоту строки.

Значения и примеры использования

Font-family

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

Font-style

Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .

Font-variant

У свойства font-variant несколько значений:

small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

Font-weight

Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal , полужирный bold .

Возможные значения font-weight :

• 100: Thin;
• 200: Extra Light (Ultra Light);
• 300: Light;
• 400: Normal;
• 500: Medium;
• 600: Semi Bold (Demi Bold);
• 700: Bold;
• 800: Extra Bold (Ultra Bold);
• 900: Black (Heavy).

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

Font-size

Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).

Абсолютную величину шрифта можно задавать не только в пикселях, пунктах или других величинах, но и особыми ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . Подробно об этих ключевых словах можно узнать в спецификации.

Line-height

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

Наследование

Свойство font наследуется от родительского элемента на его дочерние элементы.

Нюансы

✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.

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

⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Чем заменить свойство font

Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size , font-style и font-weight .

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник