HTML, XHTML и CSS на 100%
Шрифт:
p {
font-family: "Trebuchet MS", sans-serif;
}
В примере, изображенном на рис. 8.4, показано окно браузера в системе, где установлен шрифт Trebuchet MS.
Рис. 8.4. Установка шрифта
Внимание!
Необходимо помнить, что если название шрифта содержит пробелы, то его необходимо заключить в кавычки.
Вы можете попробовать работать и с другими шрифтами и группами. Ниже приведены несколько групп и их основные шрифты, которые доступны для большинства пользователей с разными браузерами и операционными системами:
• serif – Times New Roman, Garamond, Georgia;
• sans-serif – Trebuchet, Arial, Verdana;
• monospace – Courier, Courier New, Andale Mono.
Старайтесь не использовать экзотических шрифтов, и тогда вы сможете быть уверенными, что страница у клиента будет отображена так, как вы задумали.
Стиль шрифта
Стиль шрифта задается свойством font-style, которое может принимать одно из трех значений: normal, oblique или italic. Эти значения имеют следующий смысл.
• normal – определяет шрифт, который классифицируется как Normal. При отображении на экране он выглядит как обычный текст.
• oblique – задает шрифт, который классифицируется как Oblique. К нему, как правило, относятся шрифты со словами Oblique, Slanted или Incline в названиях. Такой текст может в действительности генерироваться электронным наклоном нормального шрифта.
• italic – определяет шрифт, который классифицируется как Italic и, если это недоступно, шрифт, помеченный как Oblique. К Italic, как правило, относятся шрифты со словами Italic, Cursive или Kursiv в названиях.
Для примера изменим стиль элементов P класса namek в нашем примере на курсив:
p.namek {
font-style: italic;
}
На рис. 8.5. видно что текст Намек: добивается успеха только тот, кто старается теперь записан курсивом.
Рис. 8.5. Стиль шрифта
Вы также можете сделать весь текст на странице курсивом, используя такой код:
body {
font-style: oblique;
}
Вид шрифта
Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задано значение small-caps, то текст будет выведен шрифтом из малых прописных букв. Если задано значение normal, то текст отображается, как обычно.
Лучше всего это понятно на примере. Применим свойство small-caps для наших заголовков второго уровня:
h2 {
font-variant: small-caps;
}
Результат просмотра страницы браузером Internet Explorer 6 показан на рис. 8.6.
Рис. 8.6. Вариант шрифта
Примечание
Следует отметить, что если font-variant имеет значение small-caps, а шрифт недоступен, то браузер будет симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае весь текст будет воспроизведен буквами верхнего регистра.
Ширина шрифта
Свойство font-weight определяет ширину шрифта. Значение может быть задано числом от 100 до 900 (в сотнях), где каждый номер обозначает шрифт, который темнее своего предшественника. В других случаях значение может быть следующим.
• normal – текст будет отображен обычным шрифтом. В числовом выражении соответствует значению 4 0 0.
• bold – текст будет отображен более широким шрифтом, чем обычно. Численно оно равно значению 7 0 0.
• bolder – определяет более темный вес шрифта, чем наследуемый. Если наследуемое значение равно 9 0 0, то результат будет также 9 0 0.
• lighter – задает вес шрифта, который светлее, чем наследуемый. Если наследуемое значение равно 10 0, то результат будет также 10 0.
Для примера установим значение свойства font-weight для класса w_600 элемента P, равное 600.
p.w_600 {
font-weight: 600;
}
Результат приведен на рис. 8.7.
Рис. 8.7. Вес шрифта
В качестве эксперимента вы можете попробовать задать элементу BODY значение свойства font-weight равным normal, а потом изменить его на 400. Вы увидите, что толщина шрифта основного текста в обоих случаях осталась одинаковой и вид текста на странице не изменился.
Размер шрифта
Теперь изменим размер шрифта основного текста. Для этого существует свойство font-size. Размер шрифта задается с помощью значения и единицы измерения, выбранной в одной из двух разных групп: абсолютной и относительной.
Абсолютные единицы:
• in – дюйм, примерно равен 2,5 см;
• mm – миллиметр;
• cm – сантиметр;
• pt – пункт, примерно равен 1/7 дюйма;
• pc – пика (равна 12 пунктам).
Относительные единицы:
• em – высота шрифта элемента;
• ex – высота буквы x;
• px – пиксел;
• % – процентное соотношение.
Группу относительных единиц удобно использовать, чтобы сохранить первозданный вид документа на любом устройстве (на экране, при печати).
Для нашего примера сделаем размер шрифта текста, равный 14 пунктам:
p {
font-size: 14pt;
}
Результат можно увидеть на рис. 8.8.
Рис. 8.8. Размер шрифта 14 pt