Тема 2. Управление шрифтом

FONT-FAMILY. Устанавка семейства шрифта.

Семейство шрифтов (font family) - это набор шрифтов с похожими характеристиками. В Web существует пять основных типов шрифта:

serif	Шрифты с засечками (шрифт Times).
sans-serif	Рубленные шрифты, шрифты без засечек, типичный представитель (шрифт Arial).
monospace	Моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
cursive	Курсивные шрифты
Fantasy	Декоративные шрифты

font-family: Georgia, 'Times New Roman', Times, serif;

FONT-SIZE. Размер шрифта

Относительные единицы

Единица	Пример	Описание
рx	font-size:12px;	Размер в пикселях. Пиксель это элементарная точка отображаемая устройством. Размер пикселя зависит от разрешения экрана устройства.
%	font-size:100%;	Размер в процентах относительно родительского элемента
em	font-size:1em;	1em равен размеру шрифта заданного браузером по умолчанию.
ex	font-size:1ex;	Равен размеру буквы x. Эта величина зависит от размера заданного в браузере по умолчанию

Абсолютные единицы измерения

Единица	Пример	Описание
in	font-size:0.3in;	Дюйм (1 дюйм равен 2,54 см)
cm	font-size:1cm;	Сантиметр.
mm	font-size:5mm;	Миллиметр.
pt	font-size:12pt;	Пункт (1 пункт равен 1/72 дюйма).
pc	font-size:12pc;	Пика (1 пика равна 12 пунктам)

font-size: 250%; /* Размер шрифта в процентах */

FONT-STYLE. Курсив

С помощью элемента font-style можно выделить текст курсивом, сделать шрифт наклонным или оставить его начертание обычным (normal). Если установлен курсив, но данный тип шрифта не имеет такого свойства, текст автоматически становится наклонным.

normal	Обычное начертание.
italic	Курсивное начертание.
oblique	Наклонное начертание.

font-style: italic;

FONT-WEIGHT. Толщина шрифта

normal	Обычное начертание.
bold	Полужирное начертание.
bolder	Увеличивает толщину шрифта по сравнению с родительским элементом
lighter	Уменьшает толщину шрифта по сравнению с родительским элементом
100 до 900	Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

font-weight: bold;

FONT-CAPS. Создание капители.

normal	Обычное начертание.
small-caps	Капитель.

font-variant: small-caps; /* Устанавливаем капитель для заголовка */

@FONT-FACE. Загрузка шрифта.

Правило @font-face позволяет определить настройки шрифтов, а также загрузить шрифт на компьютер пользователя.

@font-face

{

font-family: Klementina;

src: url(fonts/klementina.ttf);

}

! Internet Explorer поддерживает только шрифты формата EOT (Embedded OpenType)

FONT. Укороченная запись определения свойств шрифта.

Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font.

font: font-style font-variant font-weight font-size/line-height font-family

Задание 2.1 Установка шрифта

Создайте html файл добавьте в него заголовок первого уровня и заголовок третьего уровня. Добавьте на страницу следующие стили:

<style type="text/css">

h1

{

font-family: Georgia, 'Times New Roman', Times, serif;

}

h3

{

font-family: 'Courier New', Courier, Monaco, monospace;

}

.copy

{

font-family: Arial, Helvetica, Geneva, sans-serif;

}

</style>

Задание 2.2 Установка размера шрифта

----------------------------------------------------------------------------------------------------------------------------------

Укажите размер шрифта одним из следующих способов:

• в единицах длины (измеряется в пунктах);

• используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large;

• smaller или larger описывает размер по отношению к размеру родительского элемента;

• в процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например, 75%).

<style type="text/css">

.copy

{

font-size: 12px;

}

blockquote

{

font-size: 2em;

}

h3

{

font-size: large;

}

</style>

Задание 2.3 Установка курсива шрифта

Чтобы определить стиль шрифта в свойстве font-style, используйте следующие значения:

• italic. Текст выделяется курсивом;

• oblique. Текст наклоняется вправо;

• normal. Этот атрибут отменяет все другие.

<style type="text/css">

.booktitle

{

font-family: 'times new roman', times, serif;

font-style: italic;

}

blockquote

{

font-family: arial, helvetica, serif;

font-style: italic;

}

</style>

Задание 2.4 Установка толщины шрифта

<style type="text/css">

.bolder

{

font-weight: lighter;

}

p i

{

font-weight: bolder;

}

</style>

Задание 2.5 Создание правила для minicaps

<style type="text/css">

h2

{

font-variant: small-caps;

}

</style>

Задание 2.6 Определение нескольких значений шрифта

<style type="text/css">

h1

{

font: bold italic small-caps 2.5em/3em 'minion web', Georgia, 'Times New Roman', Times, serif;}

h3

{

font: caption;

}

.copy

{

font: 10px/20px Arial, Helvetica, Geneva, sans-serif;

}

</style>