Все тексты, представленные в данном разделе, являются плодом нашего интеллектуального труда. Перевод уроков осуществлялся вручную, по возможности сохранялся стиль автора и особенности оригинального языка.
Исходя из вышесказанного – огромная просьба к вам, коллеги web-мастера: пожалуйста, уважайте наш труд, при использовании любых материалов нашего сайта и, в частности, данного раздела ставьте ссылку на сайт www.bcat.com.ua. Заранее спасибо!
Внешний вид нашего текста и шрифты – это то, чем мы очень хотели бы управлять при помощи CSS. Правила селектора font влияют, главным образом, на те параметры, которые мы контролировали при помощи тега <font>, тогда как правила селектора text охватывают другие параметры, влияющие на то, как будет представлен фрагмент текста.
селектор {
font-family: шрифт1, шрифт2,шрифт3, шрифт4...., стиль шрифта по умолчанию;
}
Пример:
P {
font-family: verdana, arial, helvetica, sans-serif;
}
Группы семейства шрифтов обычно делятся по типам шрифтов: грубо говоря есть 5 типов шрифтов; sans-serif (шрифты типа Helvetica и Verdana); serif (шрифты типа Times and Georgia, имеющие небольшую "выравнивающую полосу" в нижней части - в типографских терминах ее называют serif); monospace (шрифты типа Courier, напоминающие шрифты времен пишущих машинок); cursive (каллиграфические и рукописные шрифты) и fantasy (шрифт dingbat и т.п..) В указании семейства шрифтов вы помещаете наиболее предпочтительный шриф первым; если пользователь не имеет этого шрифта, то будет выбран второй, по порядку шрифт, если нет и этого - третий, и так далее. Если на пользовательском компьютере не установлен ни один из заявленных шрифтов – будет использоваться шрифт браузера по умолчанию - sans-serif, serif или другой.
Вот – несколько примеров определений семейств шрифтов:
font-family: verdana,arial,helvetica,sans-serif;
font-family: georgia, "Times New Roman", times, serif;
font-family: "ITC Zapf Chancery","Brush Script",cursive;
Если шрифт имеет определенное название, например Andale Mono" или "ITC American Typewriter", то при объявлении это название необходимо заключать в двойные кавычки; если же шрифт имеет общее или однословное название, как Verdana, кавычки не нужны. Будьте осторожны при использовании нераспространенных шрифтов – это может привести к неожиданному или даже нечитабельному результату!
селектор {
font-size: size размер в цифрах с единицей измерения;
}
Пример:
H1 {
font-size: 16px;
}
Свойство font-size достаточно красноречиво: вы определяете некоторый размер для шрифта в элементе, заданном селектором. В вышеупомянутом примере, мы указываем размер 18 пикселей для всех элементов <H1> на нашей странице.
селектор {
font-weight: вес;
}
Пример:
H2 {
font-weight: 900;
}
Свойство font-weight (вес шрифта) также просто для понимания. Вес шрифта по умолчанию – normal (нормальный), можно также указать bold – жирный. Кроме того, вес шрифта можно определять в относительных терминах, например bolder или lighter. Для большего контроля над жирностью шрифта ее можно задавать в цифрах на 9 уровнях начиная от 100 (тонкий) и до 900 (очень жирный). Обратите внимание, что не все шрифты имеют 9 уровней жирности, так что величины 100-300 обычно "тонкие", 400-500 "нормальные", а 600-900 "жирные".
селектор {
font-style: стиль;
}
Пример:
EM {
font-style: normal;
}
Свойство font-style определяет, будет ли часть текста курсивная (italic), наклонная (oblique - наклон шрифта вправо) или нормальная (normal). Возникает вопрос, при каких обстоятельствах вам может понадобиться определять стиль шрифта как нормальный? Это полезно, когда заданный по умолчанию стиль для элемента является курсивным, например для тега EM, а Вы хотите, чтобы он отображался «нормальным» текстом.
селектор {
font-variant: вариант;
}
Пример:
H4 {
font-variant: small-caps;
}
Свойство font-variant используется, для определения различных вариантов шрифта таких, как малые прописные (small-caps), сжатые (condensed), и так далее. Пока что единственным практическим использованием этого правила является значение small-caps, превращающее все ваши строчные буквы в прописные малого размера. Однако это свойство поддерживается только для шрифтов, фактически имеющих различные варианты для заглавных и строчных букв.
селектор {
line-height: высота в цифрах с единицей измерения;
}
Пример:
BLOCKQUOTE {
line-height: 18px;
}
Здесь можно возразить, что высота строки (line-height) не является свойством шрифта! Так оно и есть, однако она наиболее часто группируется именно со свойствами шрифта, поэтому и относится к ним. Высота строки определяет расстояние между строками текста. В примере, мы устанавливаем высоту строки равной 18 пикселей – это расстояние между центральными точками двух строк.
Можно описать все свойства шрифта по отдельности, как описано выше, однако гораздо удобнее описать их все одним правилом.
селектор {
font: стиль шрифта, вариант шрифта, вес шрифта, размер шрифта/высота строки, шрифт1, шрифт2, и т.д.;
}
Пример:
P {
font: italic small-caps bold 12px/16px verdana,arial,helvetica,sans-serif;
}
Значения должны следовать в указанном порядке, но можно пропустить любое из них, если оно не используется. (Примечание: сокращенный синтаксис для селектора font не отображается должным образом в Netscape 4.x).
