CSS — работаем со шрифтом
В данной статье рассмотрим CSS-свойства, форматирующие шрифт контента сайта.
-
Всего их существует 5 штук, относятся они к семейству
- font-family — отвечает за имя шрифта
- font-size — отвечает за размер шрифта
- font-style — отвечает за стиль начертания шрифта
- font-variant — отвечает за возможность создания капители
- font-weight — отвечает за толщину шрифта
font
:
Рассмотрим эти CSS-свойства и их значения, с помощью примеров :
font-family
font-family
— CSS-свойство, назначает имя шрифту, в качестве значений принимает имена шрифтов. Имена могут быть как стандартные, так и экзотические. Здесь находится список стандартных шрифтов. Для использования экзотических шрифтов, вам нужно их поставить на свой сайт самостоятельно и сделать так, чтобы они при открытии сайта, автоматически загружались на компьютер посетителя.
Назначим элементам страницы, например абзацам p
, имя шрифта 'Times New Roman'
:
<style>
p {
font-family: 'Times New Roman';
}
</style>
<p>
Капитель - это когда строчные буквы выглядят как заглавные,
но размером меньше их.</p>
Результат:
Капитель — это когда строчные буквы выглядят как заглавные, но размером меньше их.
font-size
font-size
— CSS-свойство, назначает размер шрифту, в качестве значений принимает единицы измерения CSS.
Присвоим абзацам страницы, размер шрифта 22px
.
<style>
p {
font-family: 'Times New Roman';
font-size: '22px';
}
</style>
<p>
Капитель - это когда строчные буквы выглядят как заглавные,
но размером меньше их.</p>
Результат:
Капитель — это когда строчные буквы выглядят как заглавные, но размером меньше их.
font-style
font-style
— CSS-свойство, назначает стиль шрифту, в качестве значений принимает следующие ключевые слова:
- normal — обычное начертание
- italic — курсивное начертание
- oblique — наклонное начертание
Изначально вам может показаться, что значения italic и oblique одинаковы и что оба они просто делают шрифт наклонным. Однако между ними, всё же имеется разница.
Заключается она в следующем, некоторые шрифты имеют возможность создавать красивый рукописный почерк, так вот чтобы его увидеть нужно CSS-свойству font-style
присвоить значение italic
. Если рукописный почерк не поддерживается, то шрифт будет просто наклонным.
<style>
p {
font-family: 'Times New Roman';
font-size: '22px';
font-style: italic;
}
</style>
<p>
Капитель - это когда строчные буквы выглядят как заглавные,
но размером меньше их.</p>
Результат:
Капитель — это когда строчные буквы выглядят как заглавные, но размером меньше их.
font-variant
font-variant
— CSS-свойство, отвечает за создание капители. Капитель — это когда строчные буквы выглядят как заглавные (прописные), но размером меньше их, в качестве значений принимает следующие ключевые слова: normal
или small-caps
.
<style>
p {
font-family: 'Times New Roman';
font-size: '22px';
font-style: italic;
font-variant: small-caps;
}
</style>
<p>
Капитель - это когда строчные буквы выглядят как заглавные,
но размером меньше их.</p>
Результат:
Капитель — это когда строчные буквы выглядят как заглавные, но размером меньше их.
font-weight
font-weight
— CSS-свойство, отвечающее за толщину шрифта, в качестве значений принимает следующие ключевые слова: normal
или bold
.
<style>
p {
font-family: 'Times New Roman';
font-size: '22px';
font-style: italic;
font-variant: small-caps;
font-weight: bold;
}
</style>
<p>
Капитель - это когда строчные буквы выглядят как заглавные,
но размером меньше их.</p>
Результат:
Капитель — это когда строчные буквы выглядят как заглавные, но размером меньше их.