Свойства шрифта в CSS
Для достойного отображения информации на Вашем блоге, или сайте, кроме владения CSS стилями текста, важное значение имеет правильный выбор нужного шрифта. Поэтому — знание CSS свойств шрифтов , и успешное их применение на своём ресурсе, играет важное значение в борьбе за внимание посетителей.
Существует несколько основных свойств, которые и позволяют манипулировать шрифтами, придавая им нужный вид. Рассмотрим их:
- Font-family — определяет семейство шрифта, для примения в тексте содержимого сайта.
- Font-size — задаёт размеры шрифта веб-элемента.
- Font-style — устанавливает стиль отображения шрифта — курсивное, наклонное или обычное.
- Font-weight — задаёт насыщенность шрифта.
- Font-variant — Определяет вид представления строчных букв — т.е. устанавливает, будут ли символы отображаться в уменьшенном размере, оставаясь при этом заглавными(прописными).
- Font — и наконец универсальное свойство, позволяющее одновременно определять несколько параметров шрифта и текста.
Давайте рассмотрим каждое CSS свойство шрифтов более подробно, и с примерами.
Font-family Свойство шрифта CSS
Как Вы знаете существует два основных вида шрифтов:
С засечками — 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">
p1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p2 {
font-family: 'Times New Roman', Times, Georgia, serif;
}
</style>
</head>
<body>
<p2>Текст — шрифт 'Times New Roman' из семейства «serif»</p2>
<p1>Текст — шрифт 'Verdana' из семейства «sans-serif»</p1>
</body>
Вот что получилось:
Текст — шрифт 'Times New Roman' из семейства «serif»
Текст — шрифт 'Verdana' из семейства «sans-serif»
Если Вы заметили, шрифт '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%;
}
p3 {
font-size: 13pt;
}
p4 {
font-size: 1.1em;
}
</style>
</head>
<body>
Размер шрифта по умолчанию<br>
<h1>Заголовок H1</h1>
<p3>Размер шрифта текста 13pt (пунктов)</p3>
<p4>Размер шрифта текста 1.1em<br>(em — размер шрифта родительского элемента)</p4>
</body>
</html>
Результат:
Заголовок H1
Размер шрифта текста 13pt (пунктов)Размер шрифта текста 1.1em
(em — размер шрифта родительского элемента)
Font-style
Свойство СSS для шрифтов Font-style определяет есть ли у шрифта наклон, и если есть — то какой. Существует три значения:
italic — курсивное написание текста, как бы иммитирующее рукописное исполнение.
oblique — наклонный шрифт, похож на курсив, но получен путём наклона обычного шрифта вправо.
normal — обычное начертание, используется по умолчанию.
Сразу перейдём к примерам использования данного свойства CSS.
<head>
<title>font-style</title>
<style type="text/css">
p5 {
font-style: italic;
}
</style>
</head>
<body>
Написано обычным шрифтом
<p5>Написано курсивным шрифтом</p5>
</body>
</html>
Результат:
Написано курсивным шрифтом
Работая с текстом Вам надо знать не только стили шрифтов, но и что такое тошнота текста, плотность ключевых слов, релевантность текста.
Рекомендую:
Подпишитесь на