Шаг 24 - CSS: Параметры шрифтов

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

Давайте по порядку разберемся с заданием каждого параметра шрифта. Первым и наиболее важным параметром для любого шрифта является его размер. Размер шрифта в CSS задается параметром font-size. Этот параметр может задаваться несколькими способами. Первый способ это задание абсолютного размера букв шрифта, он указывается в пискелах, при этом к числу надо приписывать слово pt, хотя если ничего нет, то браузер воспринимает обычные цисла как количество пикселов. Например:

	P { font-size: 15pt; }
	B { font-size: 15; }
В данном примере оба элемента будут отображаться размером в 15 пикселов.

Как Вы знаете браузер имеет внутри таблицу стандартных размеров шрифтов, т.е. тех размеров, которые задаются атрибутом size в теге <font>. Для установки этих семи стандартных значений можно пользоваться встроенными названиями. Их как раз тоже семь: xx-small, x-small, small, medium, large, x-large, xx-large. Наверно понятно, что xx-small соответсвует размеру 1, а xx-large самому большому 7.

Вторым способом задания размера является относительный размер. Для увеличения размера используется значение larger, а для уменьшения smaller. Эти выражения имеют такой же смысл, как и стандартные способы задания размера шрифта size=+1 или size=-1. Естественно, что в данном случае Вы будете иметь только семь значений размера шрифта. Если Вы хотите получить иной более точный размер, то его можно задать в процентой форме или с добавлением к числовому выражению суффикса em или ex:

	P { font-size: xx-large; }
	P { font-size: 1.5em; }
	P { font-size: 150%; }
	P { font-size: 3ex; }
Обратите внимание, что суффиксы em и ex имеют разные результаты. Суффикс em действует от текущего размера шрифта, а размер заданный через ex считается относительным от единичного размера шрифта, т.е. от size=1. Поэтому не путайте буквы :-)

Следующим характерным для шрифта параметром является его жирность или если по умному, то вес :-) Задается вес параметром font-weight. Для него существует 9 стандартных значений жирности от 100 до 900, т.е. 100, 200, 300... Некоторым из этих значений присвоены свои имена. Например шрифт с нормальным весом 400 может обозначаться словом normal, и соответственно жирный весом в 700 через bold. Также здесь, как и везде, характерен способ задания относительной жирности. Чтобы повысить жирность шрифта используется слово bolder, а для понижения lighter.

Какой параметр шрифта после всего этого нам надо будет задать ? Конечно же его стиль начертания или по научному гарнитуру. Задается параметром font-family. Значением этого параметра может служить точное название выбранного вами шрифта, например, Times New Roman или Arial. Но мы уже с Вами говорили сто раз, что на разных платформах может не существовать таких шрифтов, поэтому разработчики CSS поступили умно и позволили задавать не просто названия шрифтов, но и целые семейства подобных по стилю начертания шрифтов. Для обозначения этих семейств ввели несколько стандартных значений: serif, sans-serif, cursive, fantasy, monospace. При подборе шрифта пробуйте пользоваться названиями этих семейств.

	P { font-family: "Times New Roman", serif; }

Шрифт как мы все понимаем может изображаться двумя способами: нормально и наклонно, т.е. курсивом. Поэтому для этого существует параметр font-style, который может иметь два значения normal и italic или oblique. Последние два значения для браузера считаются идентичными.

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

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

	P { font: bold italic x-large Arial, serif }
	P { font: normal small-caps 120% fantasy }

Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.