Продолжаем знакомиться с CSS свойствами шрифтов, начатое в предыдущем посте.
За толщину шрифта, или как ещё говорят — за насыщенность букв отвечает параметр font-weight.
Задать насыщенность можно двумя способами:
- Цифровой способ: от 100 — до 900, нормальным является значение 400, а двигаясь в разные стороны с шагом в одну сотню, Вы сможете менять насыщенность шрифта.
- Задание с применением ключевых слов: normal, bold — полужирное, bolder — жирное и lighter — светлое начертание.
Практически, из-за нестабильного отображения браузерами, применяют лишь значния normal и bold. Посмотрим всё напримере:
<html>
<head>
<title>font-weight</title>
<style type="text/css">
P {
font-size: 150%;
}
.f1 {
font-weight: 100%;
}
.f2{
font-weight: 800;
}
.f3 {
font-weight: bold;
}
.f4 {
font-weight: bolder;
}
.f5 {
font-weight: lighter;
}
</style>
</head>
<body>
<p>Насыщенность шрифта по умолчанию</p>
<p>Насыщенность шрифта 100</p>
<p>Насыщенность шрифта 800</p>
<p>Насыщенность шрифта bold</p>
<p>Насыщенность шрифта bolder</p>
<p>Насыщенность шрифта lighter</p>
</body>
</html>
Как Вы видите — невозможно на глаз определить разницы а насыщенности у значений bolder и bold, а также совсем не отличить от нормального текст со значениями lighter, 100. Это на практике подтвердило правильность использования лишь одного значения bold.
Переходим к следующему параметру CSS свойств шрифтов — Font-variant
Свойство Font-variant используют, когда веб-мастеру необходимо написать весь текст заглавными буквами, но размер их надо оставить маленьким (точнее — уменьшенным).
Такой шрифт ещё называют капителью, а задаётся он параметром small-caps. Перейдём к примеру:
<html>
<head>
<title>Font-variant</title>
<style type="text/css">
H2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Заголовок написанный капителью</h2>
<p>Текст написанный нормальным шрифтом. Текст написанный нормальным шрифтом. Текст написанный нормальным шрифтом.</p>
</body>
</html>
На рисунке наглядн видно отличие капители заголгвка от нормального шрифта параграфа.
При задании сразу нескольких CSS свойств шрифта одновременно, используют универсальное свойство FONT.
Значения свойства указывают через пробел. Обязательными значениями свойства FONT являются размер (font-size)
и семейство шрифтов (Font-family).Переходим к примерам:
<html>
<head>
<title>Font</title>
<style type="text/css">
.f { font: 1.2em/25pt Verdana, Arial, sans-serif; }
.f1{ font: italic 20px serif; }
</style>
</head>
<body>
<p>Текст написанный нормальным шрифтом. Текст написанный нормальным шрифтом.</p>
<p>Текст, написанный с применением параметров класса F. Текст, написанный с применением параметров класса F.</p>
<p>Текст написанный с применением параметров класса F1. Текст написанный с применением параметров класса F1.</p>
</body>
</html>
Из примера видно, что применение свойства FONT для задания сразу нескольких значений шрифта, несколько облегчает вес веб-страницы или файла CSS.
