Для достойного отображения информации на Вашем блоге, или сайте, кроме владения CSS стилями текста, важное значение имеет правильный выбор нужного шрифта. Поэтому — знание CSS свойств шрифтов , и успешное их применение на своём ресурсе, играет важное значение в борьбе за внимание посетителей.
Существует несколько основных свойств, которые и позволяют манипулировать шрифтами, придавая им нужный вид. Рассмотрим их:
- Font-family — определяет семейство шрифта, для примения в тексте содержимого сайта.
- Font-size — задаёт размеры шрифта веб-элемента.
- Font-style — устанавливает стиль отображения шрифта — курсивное, наклонное или обычное.
- Font-weight — задаёт насыщенность шрифта.
- Font-variant — Определяет вид представления строчных букв — т.е. устанавливает, будут ли символы отображаться в уменьшенном размере, оставаясь при этом заглавными(прописными).
- Font — и наконец универсальное свойство, позволяющее одновременно определять несколько параметров шрифта и текста.
Давайте рассмотрим каждое CSS свойство шрифтов более подробно, и с примерами.
Font-family
Как Вы знаете существует два основных вида шрифтов:
- С засечками — serif: Times New Roman, Georgia, Bodon и др.;
- Без засечек — sans-serif: Arial, Verdana, Helvetica, Tahoma, и др.;
- Существуют и другие типы шрифтов — курсивные(cursive), декоративные(fantasy) и моноширинные(monospace), но их применяют редко.
Типы шрифтов задаются следующим образом: сначала, через запятую перечисляются выбранные Вами названия шрифтов(по убыванию приоритета), затем пишется тип шрифтов. Тип упоминают на случай полного отсутствия в браузере клиента шрифтов, указанных вначале. Посмотрим пример:
<html>
<head>
<title>font-family</title>
<style type="text/css">
Div {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
P {
font-family: 'Times New Roman', Times, Georgia, serif;
}
</style>
</head>
<body>
<p>Текст — шрифт 'Times New Roman' из семейства «serif»</p>
<div>Текст — шрифт 'Verdana' из семейства «sans-serif»</div>
</body>
</html>
Результат в браузере:
Если Вы заметили, шрифт 'Times New Roman' написан внутри кавычек. Так пишется, если в названии шрифта больше одного слова и имеются пробелы.
Свойство Font-size
Наиболее часто размеры шрифта задаются при помощи единиц длины, принятых в CSS ( em, ex, pt, px, проценты (%) и др.). Однако можно задать размер шрифта в абсолютных (xx-small, x-small, small, medium, large, x-large, xx-large — данные единицы зависят от настроек шрифтов в ОС и браузере пользователя) или относительных (arger и smaller — зависят от родительского элемента) единицах. Из-за нечастого применения здесь мы их рассматривать не будем.
Определение размера шрифта зависит от настроек свойств родительского элемента. Применение отрицательных значений не допускается.
Рассмотрим для наглядности пример:
<html>
<head>
<title>font-size</title>
<style type="text/css">
H1 {
font-size: 200%;
}
P {
font-size: 13pt;
}
DIV {
font-size: 1.1em;
}
</style>
</head>
<body>
Размер шрифта по умолчанию<br>
<h1>Заголовок H1</h1>
<p>Размер шрифта текста 13pt (пунктов)</p>
<div>Размер шрифта текста 1.1em<br>(em — размер шрифта родительского элемента)</div>
</body>
</html>
Зависимость от установок «родителя» означает, что эти установки есть, их надо знать, и о них надо помнить.
Font-style
Свойство СSS для шрифтов Font-style определяет есть ли у шрифта наклон, и если есть — то какой. Существует три значения:
- italic — курсивное написание текста, как бы иммитирующее рукописное исполнение.
- oblique — наклонный шрифт, похож на курсив, но получен путём наклона обычного шрифта вправо.
- normal — обычное начертание, используется по умолчанию.
Сразу перейдём к примерам использования данного свойства CSS.
<html>
<head>
<title>font-style</title>
<style type="text/css">
DIV {
font-style: italic;
}
P {
font-style: oblique;
}
</style>
</head>
<body>
Написано обычным шрифтом
<div>Написано курсивным шрифтом</div>
<p>Написано наклонным шрифтом</p>
</body>
</html>.
Как видно из рисунка — курсивное и наклонное начертание текста практически не отличимо. Веб-дизайнеры обычно используют курсив, для придания шрифту наклона. Закончим со шрифтами в следующем посте.
