2.7 Шрифты

Красивое оформление Web-страницы связано с удачным выбором шрифтов и их параметров. В этом разделе даны основные свойства для работы со шрифтами.

font-family

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

Пример:

body {font-family: “Times New Roman”, serif}

font-style

Определяет начертание шрифта. По умолчанию шрифт имеет нормальное прямое начертание. Значениями свойства могут быть:

italic – курсивное начертание шрифта;

oblique – наклонное начертание шрифта;

normal – нормальное прямое начертание шрифта.

Пример:

p {font-style: italic}

font-variant

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

small-caps – строчные буквы будут выглядеть как прописные, но с меньшими размерами;

normal – вид шрифта изменяться не будет.

Пример:

p {font-variant: small-caps}

font-weight

Указывает степень жирности шрифта. Используется 9 градаций жирности шрифта от 100 до 900. Значение 100 соответствует наиболее бледному шрифту, 900 – самому жирному. По умолчанию степень жирности шрифта равна 400. Значениями свойства могут быть:

численное значение степени жирности шрифта;

bolder – степень жирности шрифта равна 900;

bold – степень жирности шрифта равна 700;

normal – степень жирности шрифта равна 400;

lighter – степень жирности шрифта равна 100.

Пример:

p {font-weight: bold}

font-size

Определяет размер шрифта. По умолчанию шрифт имеет размер 12 пунктов. Значениями свойства могут быть:

численное значение размера шрифта в единицах длины или процентах;

medium – размер шрифта равен 12 пунктов;

large – размер шрифта равен 14,4 пункта;

x-large – размер шрифта равен 17,28 пункта;

xx-large – размер шрифта равен 20,74 пункта;

small – размер шрифта равен 10 пунктов;

x-small – размер шрифта равен 8,33 пункта;

xx-small – размер шрифта равен 6,94 пункта.

Пример:

p {font-size: large}

font

Одновременно устанавливает свойства font-style, font-variant, font-weight, font-size, line-height (см. описание данного свойства в разделе «Представление текста») и font-family.

Пример:

p {font: italic small-caps bold large}

@font-face

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

Пример:

body {@font-face: Myfont; src: url(“http://www.firm.ru/Myfont.eot”)}

2.8 Представление текста

Форматирование текста играет особую роль при создании сайта. В этом разделе даны основные свойства, необходимые для представления текста.

text-indent

Определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0.

Пример:

p {text-indent: 3em}

text-align

Выравнивает текст в блоке содержимого элемента. Значениями свойства могут быть:

left – текст выравнивается по левому краю;

right – текст выравнивается по правому краю;

center – текст выравнивается по центру;

justify – текст выравнивается по обоим краям.

Пример:

p {text-align: justify}