CSS font (size, family, style, variant, weight). Примеры. Внешний вид текста в html

Свойство CSS font отвечает за внешний вид текста (форматирование): размер шрифта, стиль шрифта, расстояние между строками, толщина линий.

Синтаксис CSS font

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit;

Где:

font-style - стиль шрифта:
- normal - обычное начертание (по умолчанию)
- italic - курсивный текст
- oblique - наклонное текст (немного меньше, чем курсив)
- inherit - применяется значение родительского элемента
font-variant - тип шрифта:
- normal - обычное начертание (по умолчанию)
- small-caps - весь текст выводится в виде маленьких прописных букв
- inherit - применяется значение родительского элемента
font-weight - ширина шрифта (жирность). Можно задавать в цифрах (100, 200,.., 900) или в установленных константах:
- normal - обычный размер шрифта (400)
- bold - жирный размер (700)
- bolder - увеличивает степень жирности
- lighter - уменьшает степень жирности
Более подробно читайте в статье: свойство font-weight. Также ознакомьтесь: какой выбрать шрифт для сайта »
font-family - семейство шрифта. Другими словами это название шрифта. Их очень много, перечислим лишь часто встречающиеся:
- Ariel
- Verdana
- Times New Roman
- Calibri
- Georgia
- Impact
font-size / line-height - размер шрифта и через слэш задается еще отступ между строками. Чаще всего записывается в абсолютных значениях (в px или pt).

Помимо этих значений font может принимать значения "константы":

caption - шрифт для текста элементов форм (тег <form>)
icon - шрифт из ярлыков иконок
menu - шрифт из меню
message-box - шрифт из диалоговых окон
small-caption - уменьшенный заголовочный шрифт
status-bar - шрифт из строки состояния

Примечание

Свойства font-style, font-variant, font-weight, font-size, line-height, font-family можно использовать отдельно (независимо) друг от друга.

Как изменить стиль и оформление текста в html

Пример 1. Шрифт 15px, Ariel, Italic

<html>
<head>
<style>
	.primer1{
	font: italic 15px/30px Arial; 
	}
</style>
</head>
<body>
	<div class="primer1">Пример №1. Текст со свойством italic 15px/30px Arial. Расстояние между строками 30 пикселей</div>
</body>
</html>

На странице преобразуется в следующее

Пример №1. Текст со свойством italic 15px/30px Arial
Расстояние между строками 30 пикселей

Пример 2. Шрифт 16px, Calibri, жирный (bold)

<html>
<head>
<style>
	.primer2{
	font-size: 16px;
	font-family: Calibri;
	font-weight: bold;
	font-style: oblique;
	}
</style>
</head>
<body>
	<div class="primer2">Пример №2. Текст со свойством font-size: 16px;font-family: Calibri;font-weight: bold;font-style: oblique;
</div>
</body>
</html>

На странице преобразуется в следующее

Пример №2. Текст со свойством font-size: 16px; font-family: Calibri; font-weight: bold; font-style: oblique;

Пример 3. Font: caption

Пример: готовый шрифт для текста элементов форм "font: caption"

<html>
<head>
<style>
	.primer3{
	font: caption;
	}
</style>
</head>
<body>
	<div class="primer3">Пример №3. Текст со свойством font: caption;</div>
</body>
</html>

На странице преобразуется в следующее

Пример №3. Текст со свойством font: caption;

Для обращения к font из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.font="VALUE"

← Перейти в каталог CSS уроков