CSS-шрифт
В этой главе мы поговорим о шрифтах.
Свойства CSS для шрифтов используются для задания размера, семейства шрифта, насыщенности и стиля текста.
Свойство CSS font — это сокращённая запись, которая объединяет несколько свойств шрифта. Здесь мы объясним отдельные свойства, из которых оно состоит:
При добавлении текста или ссылок на веб-страницу мы оформляем их с помощью этих свойств. Давайте рассмотрим их подробнее.
Семейство шрифта
Мы используем свойство font-family, чтобы указать шрифт для текста. Оно задаёт название шрифта, используемого на веб-странице.
CSS Font
p {
font-family: Arial, sans-serif;
}Как видите, мы применили свойство font-family к нашему тегу <p>. Мы различаем два типа семейств:
- generic family - группа семейств шрифтов со схожим видом (например, "Serif" или "Sans-serif")
- font family - конкретное семейство шрифтов (например, "Times New Roman" или "Arial")
Если название семейства шрифта состоит более чем из одного слова, заключайте его в кавычки (например, "Times New Roman"). Также рекомендуется указывать резервное семейство шрифтов на случай, если браузер не поддерживает первое.
Стиль шрифта
Мы используем свойство font-style в первую очередь для отображения текста курсивом.
Наиболее часто используемые значения свойства font-style:
normal, которое отображает текст обычным образом,italic, которое отображает текст курсивом,oblique, которое “наклоняет” текст.
Пример свойства font-style:
Пример со свойством CSS font-style|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>По умолчанию наш текст будет иметь font-style: normal, даже если это значение не указано явно.
Размер шрифта
Мы используем свойство font-size, чтобы задать размер текста.
Значения можно указывать в пикселях, пунктах, em, rem и т. д. Полный список вы можете найти в разделе font-size. Обратите внимание, что 1em равен вычисленному размеру шрифта родительского элемента (часто по умолчанию 16px). Пиксели (px) — наиболее часто используемая единица.
Пример свойства font-size:
Пример со свойством CSS font-size|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>Вам также нужно проверить это самостоятельно. Вы можете сделать это с помощью нашего онлайн-редактора HTML click here.
Вариант шрифта
Свойство font-variant позволяет задать обычный текст или малые прописные.
Значение small-caps преобразует строчные буквы в прописные, но отображает их меньшим размером, чем исходные заглавные буквы.
Пример свойства font-variant:
Пример со свойством CSS font-variant|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Насыщенность шрифта
Теперь давайте узнаем, как сделать обычный текст более жирным, поскольку заголовки по умолчанию уже жирные.
Для этого мы используем свойство font-weight.
Наиболее часто используемые значения свойства font-weight:
normalbold
Значения также можно задавать числами.
Пример свойства font-weight:
Пример со свойством CSS font-weight|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>Как уже упоминалось, числовые значения находятся в диапазоне от 100 до 900. Значение 400 соответствует normal, а 700 — bold. По мере увеличения числа от 100 до 900 шрифт становится более жирным.
Practice
Какие из следующих утверждений верны относительно шрифтов CSS?