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

CSS свойства шрифтовДля достойного отображения информации на Вашем блоге, или сайте, кроме владения 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>

Результат в браузере:

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

Если Вы заметили, шрифт '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>

CSS свойство шрифтов font-size

Зависимость от установок «родителя» означает, что эти установки есть, их надо знать, и о них надо помнить.

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>.

свойство Css шрифтов font-style
Как видно из рисунка — курсивное и наклонное начертание текста практически не отличимо. Веб-дизайнеры обычно используют курсив, для придания шрифту наклона. Закончим со шрифтами в следующем посте.

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

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

Реклама

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

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