Продолжение. Первую часть статьи читайтездесь
Сегодня мы с вами рассмотрим следующие свойства шрифтов: 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
}
Как видите, я задал различные свойства шрифта для разных частей документа. Как это выглядит на экране, смотритездесь
(Пока оценок нет)
Загрузка...