Определение нескольких значений шрифта одновременно

2015-12-07

366

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 12

Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство 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>

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>

.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 увеличивает обычное расстояние между буквами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между буквами, но при его использовании исчезает выравнивание текста.

2015-12-07

366

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 12

Обсуждение в статье: Определение нескольких значений шрифта одновременно

Обсуждений еще не было, будьте первым... ↓↓↓