Продолжение. Первую часть статьи читайте
здесь
Сегодня мы с вами рассмотрим следующие свойства шрифтов: font-size,
font-style, font-family. По каждому свойству шрифта, для наглядности, будут приведены
небольшие примеры.
Свойство font-size
Свойство font-size
определяет размер шрифта. Обычно задается в пикселях
px или в процентах
pt.
Пример:
P {
font-size : 10pt;
}
EM {
font-size : 10px;
}
Свойство font-style
Свойство font-style определяет
стиль шрифта из выбранного семейства: нормальный (normal),
курсивный (italic) или наклонный (oblique).
Примеры:
1.Normal:
EM {
font-style : normal;
}
Отображение в браузере: Вася
Пупкин.
2.Italic:
EM {
font-style : italic;
}
Отображение в браузере: Вася
Пупкин.
Свойство font-family
Это свойство показывает каким шрифтом будет отображен текст. Через
запятую можно указывать несколько шрифтов.
Приведу фрагмент стиля:
P {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align:
justify; padding-right: 3px;
}
В данном случае текст заключенный в параграфы
<p></p> будет отображаться шрифтом Arial, а если на пользовательской машине
не установлен этот шрифт то шрифтом Helvetica, а если нет и последнего то шрифтом
sans-serif.
При использовании свойств шрифтов часто приходиться выбирать разные
свойства для разных элементов.
Приведу пример CSS:
TD {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
B {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 12pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt;
FONT-FAMILY: Arial, Helvetica, sans-serif
}
H3 {
FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #829eaa; margin-bottom: 3pt; LINE-HEIGHT:
normal; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H4 {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt;
FONT-FAMILY: Arial, Helvetica, sans-serif
}
H5 {
FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt;
FONT-FAMILY: Arial, Helvetica, sans-serif
}
Как видите, я задал различные свойства шрифта для разных частей
документа. Как это выглядит на экране, смотрите
здесь
