Пример 6
<html>
<head>
<style type="text/css">
h1 {
font: bold italic small-caps 2.5em/3em "milion web", Georgia, "Times New Roman", Times, serif;
}
h3 {
font: caption;
}
.copy {
font: 10px/20px Arial, Helvetica, Geneva, sans-serif;
}
</style>
</head>
<body>
<br>
<h1> Введение в книгу </h1>
<h3> Инструментарий Microsoft и электронная коммерция </h3>
<br>
<p class="copy"> Быстрое развитие ....
</p>
</body>
</html>
Рис.8. Определение нескольких значений шрифта, используя свойство font
Использование стилей посетителя
Было бы удобно, если бы стили шрифта, которые использует посетитель страницы, совпадали с вашими стилями. Этого можно добиться при работе с Internet Explorer 5/6 и Netscape, определив стиль шрифта с помощью ключевых слов (например font: icon:):
Caption используется для написания текста на кнопках;
Icon применяется для текста на иконках;
Menu выводится в выплывающих меню и списках;
Massage-box применяется в диалоговых окнах;
Small-caption удобен для подписей под элементами управления;
Status-bar задействуется в строке состояния.
Если вы не хотите определять какой-либо атрибут, просто не включайте его в список. Вместо него браузер воспользуется значением, установленным по умолчанию.
II. Управление текстом Кернинг
Одна из особенностей CSS заключается в том, что HTML-стили не имеют функции, которая позволяла бы легко изменять отступ для текста, включая отступ между отдельными буквами (Кернинг), словами и строками текста в абзаце. В отличие от HTML при использовании CSS, можно легко управлять отступами в тексте и изменять их по своему усмотрению.
Кернинг означает отступ между буквами в слове. Увеличение отступа часто позволяет улучшить читабельность текста. С другой стороны, слишком большой отступ может затруднить чтение, так как отдельные слова будет сложно различить на странице.
В примере 1 увеличивается отступ между буквами слова «бизнеса».
Пример 1
<html>
<head>
<style type="text/css">
.str {
letter-spacing: 2em;
}
</style>
</head>
<body>
Быстрое развитие коммуникационных технологий в настоящее время трансформирует многие процессы в современном обществе.
Не является исключением и сфера <span class="str">бизнеса</span>. Интернет, как наиболее....
</p>
</body>
</html>
Рис.1. Увеличение отступа между буквами слова
Определение кернинга
1. Напишите letter-spacing в списке CSS-определений и поставьте двоеточие:
letter-spacing:
2. Укажите значение свойства letter-spacing: длину, например 2 em. Таким образом устанавливается постоянная величина межсимвольного интервала.
Положительное значение letter-spacing увеличивает обычное расстояние между буквами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между буквами, но при его использовании исчезает выравнивание текста.
Интервал между словами
Подобно кернингу, интервалы между словами (word spacing) могут как улучшать, так и ухудшать восприятие текста. Текст, в котором между словами небольшие пробелы, легче читать.
В примере 2 некоторые слова стоят слишком близко друг к другу, а другие разделены большими пробелами.