Определение нескольких значений шрифта одновременно
Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font.
В примере 6 определяется заголовок первого уровня и класс copy, который затем применяется к абзацам в тексте. С помощью специального стиля описывается тег заголовка третьего уровня.
Определение в правиле нескольких атрибутов
1. Введите свойство font: и поставьте двоеточие. Затем укажите следующие значения:
<font-family>
<font-style>
<font-variant>
<font-weight>
<font-size>
<font-height>
<visitor-style>
2. Укажите значение font-weight и нажмите клавишу пробела
bold
3.Укажите значение font-style и нажмите клавишу пробела
italic
4. Определите значение font-variant и нажмите клавишу пробела
small-caps
5. Введите значение font-size
26px
6. Введите слэш (/), значение line-height и пробел
/3em
7. Укажите значение font-family
"milion web", Georgia, "Times New Roman", Times, serif;
Пример 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 увеличивает обычное расстояние между буквами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между буквами, но при его использовании исчезает выравнивание текста.