Свойства шрифтов в CSS

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

Содержание

Как установить CSS свойства шрифта?

В файле CSS вы можете настроить несколько свойств шрифта: font-family, font-size, font-style. Это наиболее часто используемые свойства шрифта:

font-family

С помощью свойства font-family можно задать семейство, которым будет отображаться CSS жирный шрифт:

body {
	 font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
 }
 p {
	 font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida 	Typewriter", monospace;
 }

Результат:


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

font-size

Свойство font-size предназначено для изменения размера шрифта. Вы можете использовать единицы измерения CSS, такие как пиксели, em и проценты:


Можно установить значение font-size в абсолютных и относительных единицах измерения. Абсолютные единицы задают фиксированный CSS размер шрифта, относительные — задают размер в зависимости от размеров окружающих элементов:

p {font-size:20px;}

Пиксели (px) — это наиболее часто используемые единицы измерения. Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:

p {font-size:0.875em;}

Em связаны с текущим размером шрифта браузера. 1em равен текущему значению размера шрифта, установленному в браузере. Если сравнивать с пикселями, то вы можете вычислить значение em по следующей формуле: pixels/16=em:

body {font-size:100%;}

Также можно задать размер CSS шрифта, используя процентные значения. font-size:100%; означает, что шрифт использует текущий размер шрифта браузера. Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:

body {font-size:200%;}

Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:

body {font-size:50%;}

Этот код уменьшает размер шрифта CSS наполовину по сравнению с текущим размером шрифта браузера:

font-style

В CSS предусмотрены два значения для свойства font-styleitalic и oblique:

p {font-style:italic;}
	h1{font-style:oblique;}

Другие свойства

font-weight

Если нужно вывести жирный шрифт, то можете использовать свойство CSS font weight:

p{font-weight:bold;}

Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900:

p{font-weight:bolder;} 
	p{font-weight:500;}

font-variant

Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные. При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:

p{ font-variant:small-caps;}

В следующем коде использовано большинство описанных выше свойств шрифтов в CSS:

<html>
<head>
	<style type="text/css">
		body {
			font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
		}
		p.size{ font-size:20px;}
		p.percentage{ font-size:80%;}
		p.style{ font-style:italic; }
		p.bold { font-weight:bold; }
		p.variant { font-variant:small-caps; }
	</style>
</head>
<body>
	<p class="size">This paragraph displays in font size 20</p>
	<p class="percentage">This paragraph displays in font size smaller as 80%</p>
	<p class="style">This paragraph displays in font style as Italics</p>
	<p class="bold">This paragraph displays BOLD letters</p>
	<p class="variant">This paragraph change small to capital letters</p>
</body>
</html>

Результат:

Данная публикация представляет собой перевод статьи «CSS font properties» , подготовленной дружной командой проекта Интернет-технологии.ру