CSS Шрифт
Используйте свойства шрифта CSS для стилизации текста, задания размера, жирности и семейства шрифтов.
Типографика — одно из первых, что замечает читатель на странице, и CSS даёт вам точный контроль над ней. Свойства шрифта CSS определяют гарнитуру (семейство шрифтов), размер, насыщенность (жирность) и начертание (например, курсив) вашего текста.
В этой главе рассматривается каждое отдельное свойство шрифта, приводится работающий пример для каждого из них, а затем объясняется сокращённое свойство font, позволяющее задать их все в одном объявлении.
Свойство CSS font является сокращённым и объединяет несколько свойств шрифта. Здесь мы рассмотрим отдельные свойства, из которых оно состоит:
При добавлении текста или ссылок на веб-страницу мы оформляем их с помощью этих свойств. Рассмотрим их подробнее.
Семейство шрифтов
Свойство font-family используется для указания шрифта текста. Оно определяет название шрифта, применяемого на веб-странице.
CSS Font
p {
font-family: Arial, sans-serif;
}Как видите, мы применили свойство font-family к тегу <p>. Различают два типа семейств:
- общее семейство — группа семейств шрифтов со схожим видом (например, «Serif» или «Sans-serif»)
- семейство шрифтов — конкретное семейство шрифтов (например, «Times New Roman» или «Arial»)
Если название семейства шрифтов состоит из нескольких слов, заключите его в кавычки (например, «Times New Roman»). Также рекомендуется указывать запасное семейство шрифтов на случай, если браузер не поддерживает первое.
Стиль шрифта
Свойство font-style используется главным образом для отображения текста курсивом.
Наиболее часто используемые значения свойства font-style:
normal— отображает текст обычным образом,italic— отображает текст курсивом,oblique— «наклоняет» текст.
Пример свойства font-style:
<!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:
<!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 нажмите здесь.
Вариант шрифта
Свойство font-variant позволяет отображать текст обычным образом или в виде капители.
Значение small-caps преобразует строчные буквы в прописные, но отображает их меньшего размера, чем исходные прописные буквы.
Пример свойства font-variant:
<!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:
<!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 шрифт становится жирнее.
Сокращённое свойство font
Вместо того чтобы записывать каждое свойство в отдельной строке, вы можете задать их все сразу с помощью сокращённого свойства font. Это делает таблицу стилей короче и группирует связанные объявления вместе.
Порядок значений имеет значение. Синтаксис выглядит следующим образом:
font: font-style font-variant font-weight font-size/line-height font-family;Несколько правил, которые стоит запомнить:
font-sizeиfont-familyявляются обязательными. Если одно из них отсутствует, всё объявление игнорируется.font-style,font-variantиfont-weightявляются необязательными и должны располагаться доfont-size.line-heightявляется необязательным и записывается послеfont-size, отделённый косой чертой (/).- Любое опущенное значение сбрасывается до значения по умолчанию, поэтому сокращённое свойство удобно использовать для отмены ранее заданных полных объявлений.
Ниже показан один и тот же абзац, оформленный с помощью полных свойств, а затем с помощью сокращённого:
/* Longhand */
p {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Georgia, serif;
}
/* Equivalent shorthand */
p {
font: italic bold 18px/1.5 Georgia, serif;
}Для получения дополнительных сведений и примеров смотрите главу font.