Чтение онлайн

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