html.okpython.net
HTML и CSS для начинающих

CSS :: Шрифты

Шрифты в CSS

Говоря о внешнем виде текста нельзя не затронуть тему шрифтов, которые самым прямым образом влияют на восприятие текста и его читабельность.

Шрифт – набор символов определенного размера и рисунка, презназначенных для набора текста.

Как следует из определения, изменяя рисунок символов, а также их размер, можно получать различные виды шрифтов, которые будут соответствовать общему дизайну сайта, делая его более уникальным и неповторимым. Взгляните на пример №1, на котором представлено применение к одному и тому же фрагменту текста нескольких видов шрифта.

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Шрифты</title>

	<style>
	
		.f_1{
		font-family: arial, tahoma, sans-serif;
		}
		
		.f_2{
		font-family: gabriola;
		}
		
		.f_3{
		font-family: "high tower text", sans-serif;
		}
		
		.f_4{
		font-family: "monotype corsiva", serif;
		}
		
		.f_5{
		font-family: verdana, arial;
		}
		
	</style>
	
</head>
<body>

	<p class="f_1">
		Ко мне применяется шрифт Arial.
	</p>
	
	<p class="f_2">
		Ко мне применяется шрифт Gabriola.
	</p>
	
	<p class="f_3">
		Ко мне применяется шрифт семейства sans-serif.
	</p>
	
	<p class="f_4">
		Ко мне применяется шрифт Monotype Corsiva.
	</p>
	
	<p class="f_5">
		Ко мне применяется шрифт Verdana.
	</p>
	
</body>
</html>

Пример №1. Использование различных видов шрифта

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

Установка шрифта и css-свойство font-family

Для того, чтобы указать шрифт, который будет использоваться внутри требуемого элемента, необходимо использовать наследуемое свойство font-family, в качестве значения которого нужно указать через запятую имена шрифтов или названия семейства шрифтов (см. пример №1). Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. Также при выборе шрифтов необходимо учитывать тот факт, что в операционных системах разных пользователей могут быть установлены собственные наборы шрифтов. Поэтому, если хочется применить к элементу какой-нибудь экзотический шрифт, нужно обязательно учитывать эту особенность. В таких случаях обычно первыми указывают редкие шрифты, затем более распространенные, а в конце указывают семейство шрифтов. Если браузер не находит первого шрифта на компьютере пользователя, он начинает искать второй шрифт и так до конца списка указанных в качестве значения шрифтов. Это повышает вероятность того, что хотя бы один и указанных шрифтов будет на компьютере пользователя. Если указанных шрифтов не обнаружено, браузер начинает самостоятельно подбирать шрифты из указанного списка семейств шрифтов.

В любой операционной системе по умолчанию доступны следующие стандартные семейства шрифтов:

  • serifшрифты с засечками;
  • sans-serifшрифты без засечек (рубленые шрифты);
  • cursiveкурсивные шрифты (часто напоминают рукописный текст);
  • fantasyдекоративные (художественные) шрифты;
  • monospaceмоноширинные шрифты (все буквы одинаковой ширины).

Если указанные в качестве значения свойства font-family шрифты не будут найдены браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию. Обычно это шрифт Times New Roman.

Размер шрифта и css-свойство font-size

CSS позволяет также задать ряд других характеристик шрифта: размер, начертание, насыщенность. Так размер задается наследуемым свойством font-size, которое в качестве значений принимает все доступные в CSS единицы измерения, проценты, которые считаются относительно размера шрифта родительского элемента, и ряд специальных значений: xx-small, x-small, small, medium (по умолчанию), large, x-large, xx-large, smaller, larger, где последние два значения определяют, соответственно, размер меньший или больший, чем у родительского элемента (см. пример №2).

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка размера шрифта</title>
	
	<style>

	
		.size_1{
		font-size: smaller;
		}
	
		.size_2{
		font-size: medium;
		}
		
		.size_3{
		font-size: larger;
		}
		
		.size_4{
		font-size: 150%;
		}
		
		.size_5{
		font-size: 1.5em;
		}
		
	</style>
	
</head>
<body>

	<p class="size_1">
		font-size: smaller;
	</p>
	
	<p class="size_2">
		font-size: medium; 
	</p>
	
	<p class="size_3">
		font-size: larger;
	</p>
	
	<p class="size_4">
		font-size: 150%;
	</p>
	
	<p class="size_5">
		font-size: 1.5em;
	</p>
	
</body>
</html>

Пример №2. Определение размера шрифта

Кстати, не стоит забывать, что установка размера шрифта родительского элемента может повлиять на рамеры других элементов-потомков, которые будут заданы в относительных единицах, например, в em. Ведь такие относительные единицы прямым образом зависят от размера шрифта родительского элемента.

Насыщенность шрифта и css-свойство font-weight

Насыщенность (жирность) шрифта устанавливается при помощи наследуемого свойства font-weight, принимающего ряд значений, определяющих степень жирности: normal (по умолчанию), bold, bolder, lighter и числа от 100 до 900 с шагом 100, где bolder и lighter определяют, соответственно, жирность меньшую или большую, чем у родительского элемента (см. пример №3).

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка насыщенности шрифта</title>

	<style>
	
		p{
		width: 400px;
		margin: 2em;
		}
	
		.weight_1{font-weight: normal;}
		.weight_2{font-weight: bold;}
		.weight_3{font-weight: bolder;}
		.weight_4{font-weight: lighter;}
		.weight_5{font-weight: 600;}
		
	</style>
	
</head>
<body>

	<p class="weight_1">
		normal соответствует значению 400,
		значения 100, 200, 300 не будут работать.
	</p>
	
	<p class="weight_2">
		bold соответствует значению 600. 
	</p>
	
	<p class="weight_3">
		У родительского элемента, т.е. у тела документа,
		по умолчанию браузер использует жирность normal,
		поэтому значение bolder повышает ее до bold.
	</p>
	
	<p class="weight_4">
		 lighter не сработает, т.к. браузеры на данный 
		 момент поддерживают только значения 400 и 600.
	</p>
	
	<p class="weight_5">
		600 соответствует bold.
	</p>
	
</body>
</html>

Пример №3. Установка насыщенности шрифта

На данный момент значения 100500 свойства font-weight соответствуют нормальному начертанию шрифта, а 600900, соответственно, жирному начертанию. В дальнейшем возможно станут доступны и остальные числовые значения.

Стиль шрифта и css-свойство font-style

Кроме насыщенности, конечно же, нас интересует и возможность выделять слова и фрагменты текста курсивом. CSS дает нам такую возможность за счет применения наследуемого свойства font-style, которое определяет начертание шрифта и может принимать следующие значения:

  • normal – шрифт отображается стандартным способом; значение используется браузером по умолчанию;
  • italic – шрифт отображается курсивом;
  • oblique – шрифт отображается наклонным.

Следует отметить, что понятия курсивного и наклонного начертания несколько различаются, поскольку курсивное начертание предусматривает наличие специального шрифтового набора символов со скругленными формами штрихов, что делает его похожим на рукописный текст, а наклонное начертание представляет собою всего лишь обычный прямой шрифт слегка наклоненный вправо. Более того, не всякий шрифт предусматривает курсив, поэтому даже в случае указания в свойстве font-style значения italic, символы в них будут отображаться просто наклонными.

Также хотелось бы напомним, что все свойства CSS могут принимать значение inherit, которое сообщает браузеру о том, что значение свойства должно быть унаследовано от родителя.

Капитель и css-свойство font-variant

Иногда на сайтах можно увидеть, что вместо строчных букв используются прописные, но малого размера. Такой прием в типографике называют капителью. Делается это при помощи наследуемого свойства font-variant, которое может принимать два значения normal (браузер будет отображать символы стандартным способом) и small-caps (браузер будет конвертировать символы в капитель).

Сокращенное css-свойство font

Итак, чтобы изменять различные характеристики шрифта можно воспользоваться одним из доступных свойств: font-family, font-size, font-weight, font-style, font-variant. Однако в CSS имеется возможность задать через пробел несколько характеристик шрифта одновременно в одном сокращенном наследуемом свойстве font. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слеш / значение свойства line-height, в конце указывается значение свойства font-family (см. пример №4). В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Сокращенное свойство font</title>

	<style>
	
		.font_1{
		font: 1.2em/25px serif;
		}
		
		.font_2{
		font: bold italic 0.9em "courier new", serif;
		}
		
		.font_3{
		font: normal small-caps 1em/1.2em verdana;
		}
		
	</style>
	
</head>
<body>

	<p class="font_1">
		font_1{font: 1.2em/25px serif;}.<br>
		Здесь указаны размер, высота строки и семейство.
	</p>
	
	<p class="font_2">
		font_2{font: bold italic 0.9em "courier new", serif;}.<br>
		Здесь &ndash; насыщенность, начертание, размер, шрифт + семейство.
	</p>
	
	<p class="font_3">
		font_3{font: normal small-caps 1em/1.2em verdana;}<br>
		Значение normal будет применено сразу к насыщенности<br>
		и начертанию, т.к. оно присутствует у обоих свойств.
	</p>
	
</body>
</html>

Пример №4. Одновременная установка нескольких характеристик шрифта

Следует добавить, что в качестве значений свойства font допускается указывать специальные ключевые слова, которые задают шрифт, использующийся в соответствующих элементах операционной системы пользователя:

  • caption – шрифт текста элементов управления;
  • icon – шрифт текста под иконками;
  • menu – шрифт, использующийся в меню;
  • message-box – шрифт диалоговых окон;
  • small-caption – шрифт, использующийся для небольших элементов управления;
  • status-bar – шрифт, использующийся для строки состояния окон.

Быстрый переход к другим страницам