Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Шрифты в CSS Свойства текста в CSS

Оформление шрифта в CSS

Font Font-family Font-Size Font-Style Font-variant Font-weight


Семейство шрифта
Размер шрифта
Начертание шрифта
Насыщенность шрифта
Строчные и заглавные буквы. Капитель
Универсальное свойство


В этой статье рассмотрим свойства CSS, использующиеся при оформлении шрифта. Практически на любой веб странице преобладает текстовая информация, поэтому без знания основных правил, определяющих отображение шрифта «далеко не шагнешь».

Семейство шрифта

Свойство font-family предназначено для указания семейства шрифта, которое будет использоваться при оформлении текста в элементе.

Если свойство font-family не указано, то используется шрифт, установленный в браузере по умолчанию. Если Вам необходим какой-то определенный шрифт, нужно указать его название (подробнее здесь...).

Можно указать названия нескольких шрифтов через запятую. В этом случае для оформления текста элемента браузер воспользуется первым шрифтом из перечня, если он установлен на компьютере пользователя. Если такового нет, браузер воспользуется вторым шрифтом. И он отсутствует - тогда третьим и т.д.

Если указать семейство шрифтов, то браузер воспользуется одним из шрифтов из этого семейства.

Самый практичный вариант - указать названия нескольких шрифтов, а затем одно из семейств.

Если в названии шрифта имеются пробелы, то его необходимо заключить в двойные или одинарные кавычки.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<head>
<title>
Семейство шрифта </title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<p> Для оформления текста в параграфах данного документа я указал два шрифта из семейства monospace и название самого семейства. </p>
<p>
Браузер воспользуется одним из указанных шрифтов, либо другим шрифтом из семейства monospace. </p> </body>

Фрагмент кода из файла со стилями:

p {font-family:'Courier New', Courier, monospace;}

Результат:


Для оформления текста в параграфах данного документа я указал два шрифта из семейства monospace и название самого семейства.

Браузер воспользуется одним из указанных шрифтов, либо другим шрифтом из указанного семейства.


Размер шрифта

Размер шрифта элемента можно установить при помощи свойства font-size.

В CSS есть такое понятие как абсолютный размер шрифта, который задается с помощью ключевых слов xx-small, x-small, small, medium, large, x-large и xx-large; и понятие относительный размер шрифта - задается с помощью слов larger и smaller, которые устанавливают размера шрифта соответственно больше и меньше на одно значение относительно его текущего размера.

Также размер шрифта можно задать в % и в любых допустимых единицах CSS (подробнее здесь...).

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p style="font-size:15px;"> Установлен размер шрифта для данного абзаца - 15 пикселей. <span style="font-size:larger;"> Теперь размер шрифта больше относительно установленного. </span></p>

Результат:


Установлен размер шрифта для данного абзаца - 15 пикселей. Теперь размер шрифта больше относительно установленного.


Начертание шрифта

Свойство font-style устанавливает стиль написания шрифта.

По умолчанию, а также если свойству font-style присвоено значение normal, браузер отображает шрифт без наклона.

Но кроме стандартного стиля существует курсивный и наклонный шрифт - значения italic и oblique соответственно. Курсивный шрифт имитирует рукописный, а наклонный образуется наклоном стандартных букв на определенный угол.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p> Стандартный шрифт. </p>
<p style="font-style
:oblique;"> Наклонный шрифт. </p>

Результат:


Стандартный шрифт.

Наклонный шрифт.


Насыщенность шрифта

Свойство font-weight позволяет задать насыщенность (толщину) шрифта.

Насыщенность шрифта задается в условных единицах от 100 до 900 с шагом 100 или с помощью ключевых слов: lighter - светлый шрифт, normal - нормальный шрифт, bold - полужирный шрифт и bolder - жирный шрифт.

По умолчанию шрифт соответствует значению normal или 400 условным единицам.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p> Нормальный шрифт. </p>
<p style="font-weight
:700;"> Жирный шрифт. </p>

Результат:


Нормальный шрифт.

Жирный шрифт.


Строчные и заглавные буквы. Капитель

Свойство font-variant устанавливает характер написания строчных букв.

Значение small-caps этого свойства позволяет отобразить текст Капителью - это когда строчные буквы представлены малыми заглавными. По умолчанию свойство имеет значение normal, что соответствует стандартному написанию строчных букв.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p> Строчные буквы в привычном для всех виде. </p>
<p style="font-variant
:small-caps;"> Строчные буквы преобразованы в малые заглавные. </p>

Результат:


Строчные буквы в привычном для всех виде.

Строчные буквы преобразованы в малые заглавные.


Универсальное свойство

Свойство font является универсальным свойством, позволяющим одновременно указать значения всех свойств, связанных со шрифтом.

Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p style="font: italic 18px Georgia, 'Times New Roman', Times, serif;"> В данном абзаце текст оформлен курсивом. Установлен шрифт Georgia размером 18 пикселей. </p>

Результат:


В данном абзаце текст оформлен курсивом. Установлен шрифт Georgia размером 18 пикселей.


Цвет и фон в CSS Шрифты в CSS Свойства текста в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru