Шрифты в CSS и их свойства

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

Материалы по теме:

• 4 подхода к созданию фона HTML страницы
• Создание CSS тени для текста и других текстовых эффектов при помощи CSS
• Создаем эффект свечения для полей HTML форм при помощи CSS

Для определения гарнитуры, размера, стиля шрифта в CSS имеется множество возможностей. В этом уроке мы остановимся на основных свойствах и значениях шрифтов, а также рассмотрим, как их использовать на практике.

Первое свойство, которое мы рассмотрим это font-family. При помощи данного свойства определяется гарнитура шрифта или семейство.

Гарнитура шрифта это набор символов имеющих одинаковое стилевое оформление.

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

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

Существуют следующие семейства шрифтов:

serif - это шрифты с засечками, представитель данного семейства Times New Roman, Times, Garamond;

sans-serif - рубленные шрифты или шрифты без засечек это Verdana, Arial, Helvetica;

cursive - курсивные шрифты, такие как Zapf-Chancery;

fantasy - декоративные шрифты;

monospace - моноширинные шрифты.

Например, зададим шрифт для абзаца:

p {font-family:Verdana, Arial, sans-serif;}

В коде страницы напишите, какой либо текст, заключенный в теги <p></p>:

 <p>Текст оформленный шрифтом Verdana</p>

В данном случае браузер будет использовать шрифт Verdana, а в случае его отсутствия на компьютере посетителя шрифт Arial, ну а если нет и данного шрифта то будет использован любой шрифт из семейства sans-serif.

Если вы не знаете как присоединить файл стилей к HTML документу или как использовать CSS, то ознакомьтесь с уроком основы CSS.

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

Например:

 p {font-family:"Times New Roman" serif}

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

Первый способ это установка размера шрифта при помощи значений: xx-small, x-small, small, medium, large, x-large, xx-large. Какой величине шрифта будет соответствовать каждый параметр зависит от браузера и операционной системы.

Поэтому данным способом трудно добиться одинакового вида шрифтов в разных браузерах и его используют редко. Существую еще два значения при помощи которых можно установить относительные размеры шрифта:

smaller - шрифт будет меньше чем у родительского элемента;

larger - шрифт будет больше чем у родительского элемента.

Для того чтобы посмотреть как это работает, создадим следующие правила:

 p { font-size:16px;}
.small {font-size: smaller;} 
.big {font-size:larger;}

В html код страницы поместите следующее:

 <p>Это родительский текст размером 18 пикселей, <span class="small"> а это текст меньше чем родительский,</span> дальше опять нормальный родительский текст и <span class="big"> начинается текст больше родительского</span> </p>

В браузере это будет выглядеть так:

Ну и еще один способ, установки размера шрифта, как вы уже могли видеть из примера расположенного выше, это установка размера при помощи любых доступных единиц CSS. А именно в пикселях (px), процентах (%), пунктах (pt) и т. д.

Следующее свойство font-style определяет стиль шрифта. Существуют следующие значение данного свойства:

normal - обычное начертание шрифта;

italic - курсивный шрифт;

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

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

Например, зададим курсивный шрифт:

p {font-style: italic;}

HTML код будет такой:

<p>Курсивный шрифт</p>

Следующее CSS свойство font-variant. Данное свойство определяет, каким образом необходимо выводить прописные буквы - оставить их без изменений или выводить их маленькими заглавными символами. Может иметь два значения:

normal - символы будут выводиться без изменений;

small-caps - текст будет выводиться маленькими прописными символами.

В качестве примера выведем часть текста маленькими прописными символами, а часть оставим без изменений. Для этого создайте следующие правила:

p{font-variant: small-caps;}
.nor{font-variant: normal;}

HTML код будет таким:

<p>Текст написанный заглавными символами <span class="nor">обычный текст</span></p>

Вот что у вас должно получиться:

Следующее CSS свойство font-weight. Определяет насыщенность шрифта. Данное свойство имеет множество значений. Насыщенность можно задавать при помощи цифр от 100 до 900 т. е. могут быть следующие варианты насыщенности 100, 200, 300, 400, 500, 600, 700, 800, 900. Самое светлое начертание отображаемое браузерам равно 100, а самое темное 900.

Кроме этого существуют следующие значения:

bold - определяет полужирное начертание, это значение используется чаще всего, в численном выражении оно равно 700.

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

lighter - насыщенность будет меньше чем у родительского элемента;

bolder - насыщенность будет больше чем у родительского элемента.

Ну и еще одно свойство это normal - определяет нормальное начертание.

Для примера создайте следующий набор объявлений:

p{font-weight:bold;} 
span{font-weight:lighter;} 
span.bol{font-weight: bolder;}

HTML код:

<p>Текст с полужирным начертанием</p> 
<p>Полужирное начертание - <span>текст с меньшей насыщенностью</span>
</p>Обычный текст - <span class="bol">текст с большей насыщенностью</span>

В результате получится следующее:

Ну и последнее CSS свойство это - font. Данное свойство позволяет задать сразу несколько свойств и объединить все необходимые значения. Например, у нас имеется следующий набор правил:

p{ font-family:Verdana, Arial, sans-serif; 
font-weight:bold; 
font-size:16px; 
font-style:italic;}

Как вы видите, запись содержит много кода. Ее можно уменьшить, применив сокращенную запись:

p{font:italic bold 16px Verdana, Arial, sans-serif}

В этом случае просто записываются значения в определенной последовательности. Для этого необходимо соблюдать следующую последовательность записи:

font: font-style font-variant font-weight font-size font-family

Т. е. в начале должно идти свойство определяющее начертание, затем свойство, определяющее каким образом будут отображены прописные символы, затем свойство устанавливающее насыщенность шрифта, затем свойство определяющее размер шрифта ну и наконец, свойство определяющее гарнитуру шрифта.

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

Это было последнее CSS свойство шрифта, на этом наш урок закончен.

Материал подготовлен порталом: webmastermix.ru

• Селекторы CSS
• Фон в CSS
• Параграфы и выравнивание текста в HTML
• Как изменять цвет текста в html документе
• Форматирование текста в HTML