 |
Шрифты в 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.
Если название шрифта содержит пробелы, то его необходимо записывать в кавычках. Например:
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>
Следующее свойство font-variant. Данное свойство определяет, каким образом необходимо выводить прописные буквы - оставить их без изменений или выводить их маленькими заглавными символами. Может иметь два значения:
normal - символы будут выводиться без изменений;
small-caps - текст будет выводиться маленькими прописными символами.
В качестве примера выведем часть текста маленькими прописными символами, а часть оставим без изменений. Для этого создайте следующие правила:
p{font-variant: small-caps;}
.nor{font-variant: normal;}
HTML код будет таким:
<p>Текст написанный заглавными символами <span class="nor">обычный текст</span></p>
Вот что у вас должно получиться:
Следующее свойство 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>
В результате получится следующее:
Ну и последнее свойство это - 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}
В этом случае просто записываются значения в определенной последовательности. Для этого необходимо соблюдать следующую последовательность записи:
|
|
|
