CSS свойства шрифта 2

CSS свойства шрифтаПродолжаем знакомиться с 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>

свойство CSS font-weight

Как Вы видите — невозможно на глаз определить разницы а насыщенности у значений 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-variant

На рисунке наглядн видно отличие капители заголгвка от нормального шрифта параграфа.

При задании сразу нескольких 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>

свойство CSS Font

Из примера видно, что применение свойства FONT для задания сразу нескольких значений шрифта, несколько облегчает вес веб-страницы или файла CSS.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha