Введение
Уже в стандарте CSS1 была заложена возможность использования различных шрифтов для отображения текста документа. При этом предполагалось, что необходимые шрифты установлены на компьютере-клиенте; если же их нет, то вместо них обозреватель должен был использовать собственные шрифты, близкие по характеристикам к требующимся.
Стандарт CSS2 внес существенные изменения в эту концепцию с тем, чтобы авторы имели большую свободу в выборе шрифтов, а обозреватели - в своих действиях, когда заданный автором шрифт непосредственно не доступен. В основе новой концепции лежит понятие загружаемых шрифтов, т. е. шрифтов, отсутствующих на компьютере-клиенте, но доступных для загрузки из Сети. В дополнение к этому CSS2 предусматривает наличие базы данных о шрифтах, содержащей их разнообразные характеристики и позволяющей по мере необходимости синтезировать недостающие шрифты на основе доступных обозревателю шрифтов.
Ниже изложены все способы работы со шрифтами, предоставляемые CSS. При этом свойства, управляющие отображением шрифтов и унаследованные из CSS1, описаны в этом разделе , а новые методы доступа к загружаемым шрифтам, появившиеся в CSS2, описываются в этом разделе.
Задание свойств шрифтов
Семейство шрифтов: свойство font-family
| Синтаксис: | font-family: [[<имя-семейства> | <родовое-имя>],]* [<имя-семейства> | <родовое-имя>] | inherit | | Начально: | зависит от обозревателя | | Применимо: | ко всем элементам | | Наследуемо: | да | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : |  | Соответствует стандарту (4.0+) | | |  | Соответствует стандарту (4.0+) |
Свойство font-family задает список имен семейств шрифтов для отображения содержимого элемента. Этот список состоит из имен семейств шрифтов, разделенных запятыми. Имена семейств располагаются в порядке предпочтения. Например, следующее свойство
font-family: Verdana, Arial, sans-serif;
следует понимать так: "использовать шрифт Verdana; если его нет, то использовать шрифт Arial; если его нет, то использовать родовой шрифт sans-serif". Такой список необходим, поскольку мы заранее не знаем, какие именно шрифты установлены на компьютерах наших пользователей.
Имя семейства шрифтов может быть задано двумя способами:
<имя-семейства>
Задает название семейства шрифтов. Если это название содержит пробелы, то оно
должно быть заключено в кавычки или апострофы.
<родовое-имя>
Одно из следующих имен: serif, sans-serif, cursive, fantasy и monospace.
См. cледующий раздел
Для достижения наибольшей совместимости рекомендуется задавать родовое имя шрифта последним в списке. В этом случае, если обозреватель не найдет на компьютере-клиенте ни одного из заданных шрифтов, он использует свой родовой шрифт с заданным именем.
Родовые имена шрифтов
Родовые имена шрифтов были разработаны на тот наихудший случай, когда на компьютере-клиенте не установлен ни один из шрифтов, заданных автором. В этом случае обозреватель использует родовой шрифт, начертание которого напоминает авторский шрифт. Существует пять имен родовых шрифтов:
serif (шрифт с засечками)
Это пропорциональные шрифты с засечками на буквах. Типичные примеры: Times New Roman, Bodoni, Garamond.
sans-serif (шрифт без засечек)
Это пропорциональные шрифты без засечек на буквах. Типичные примеры: Arial, Verdana, Helvetica, Tahoma.
cursive (каллиграфический шрифт)
Это шрифты, стилизованные под рукописный текст, обычно с типичными для него соединениями между буквами. Типичный пример: Zapf-Chancery.
fantasy (декоративный шрифт)
Это шрифты декоративного характера. Типичный пример: Western.
monospace (телетайпный шрифт)
Это шрифты фиксированной ширины, напоминающие шрифт пишущей машинки. Типичные примеры: Courier New, Prestige, Everson Mono.
То, какой именно конкретный шрифт используется в качестве реализации родового, зависит от обозревателя.
Стиль шрифта: свойство font-style
Синтаксис:| font-style: normal | italic | oblique | inherit | Начально:normal | Применимо:ко всем элементам | Наследуемо:да | Проценты:не используются | Устройства:визуальные |
| Поддержка : | | Соответствует стандарту; oblique отображается как italic (4.0+) | | | | Соответствует стандарту; oblique не поддерживается (4.0+) |
Свойство font-style задает стиль шрифта для отображения содержимого элемента. Оно может иметь следующие значения:
| normal | Обычный шрифт | | italic | Курсивный шрифт | | oblique | Наклонный шрифт |
Например, следующий фрагмент
<P>
<SPAN style="font-style: normal">Обычный шрифт. </SPAN>
<SPAN style="font-style: italic">Курсивный шрифт. </SPAN>
<SPAN style="font-style: oblique">Наклонный шрифт. </SPAN>
</P>
будет отображаться так:
Обычный шрифт. Курсивный шрифт. Наклонный шрифт.
Вариант шрифта: свойство font-variant
| Синтаксис: | font-variant: normal | small-caps | inherit | | Начально: | normal | | Применимо: | ко всем элементам | | Наследуемо: | да | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Не поддерживается |
Свойство font-variant задает вариант шрифта для отображения содержимого элемента. Оно может принимать следующие значения:
| normal | Обычные буквы | | small-caps | Малые прописные буквы |
Например, следующий фрагмент
<P style="font-variant: small-caps">Малые прописные буквы.</P>
будет отображаться так:
Малые прописные буквы.
О преобразовании текста в прописные буквы см. также описание свойства text-transform.
Жирность шрифта: свойство font-weight
| Синтаксис: | font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | | Начально: | normal | | Применимо: | ко всем элементам | | Наследуемо: | да, наследуется вычисленное значение | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту (4.0+) |
Свойство font-weight задает жирность шрифта для отображения содержимого элемента. Оно может принимать следующие значения:
| 100 - 900 | Задает жирность шрифта (чем больше значение, тем выше жирность шрифта). | | normal | То же, что 400. | | bold | То же, что 700. | | bolder | Указывает, что шрифт должен быть более жирным, чем родительский шрифт. | | lighter | Указывает, что шрифт должен быть менее жирным, чем родительский шрифт. |
То, как именно числовые значения соответствуют реальной жирности шрифта, зависит от обозревателя. Например, следующий фрагмент
<P>
<SPAN style="font-weight: 100">100 </SPAN>
<SPAN style="font-weight: 200">200 </SPAN>
<SPAN style="font-weight: 300">300 </SPAN>
<SPAN style="font-weight: 400">400 </SPAN>
<SPAN style="font-weight: 500">500 </SPAN>
<SPAN style="font-weight: 600">600 </SPAN>
<SPAN style="font-weight: 700">700 </SPAN>
<SPAN style="font-weight: 800">800 </SPAN>
<SPAN style="font-weight: 900">900 </SPAN>
</P>
может отображаться так:
100 200 300400 500 600700 800 900
Выключка шрифта: свойство font-stretch
| Синтаксис: | font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit |
| Начально: | normal | | Применимо: | ко всем элементам | | Наследуемо: | да | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Не поддерживается | | | | Не поддерживается |
Свойство font-stretch задает выключку шрифта, т. е. интервал между символами при отображении содержимого элемента. Оно может иметь следующие значения (в порядке увеличения выключки):
| ultra-condensed | Сверхуплотненный шрифт | | extra-condensed | Сильно уплотненный шрифт | | condensed | Уплотненный шрифт | | semi-condensed | Полууплотненный шрифт | | normal | Обычный шрифт | | semi-expanded | Полуразреженный шрифт | | expanded | Разреженный шрифт | | extra-expanded | Сильно разреженный шрифт | | ultra-expanded | Сверхразреженный шрифт |
Кроме того, имеется возможность задавать относительную разрядку шрифта:
| wider | Указывает, что шрифт должен быть более разреженным, чем родительский шрифт. | | narrower | Указывает, что шрифт должен быть более уплотненным, чем родительский шрифт. |
То, как именно эти значения соответствуют реальной выключке шрифта, зависит от обозревателя. Пример:
<P><SPAN style="font-stretch: expanded">Разрядка моя </SPAN>(Л. И. Брежнев).</P>
Размер шрифта: свойство font-size
| Синтаксис: | font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <размер> | <процент> | inherit | | Начально: | medium | | Применимо: | ко всем элементам | | Наследуемо: | да, наследуется вычисленное значение | | Проценты: | относительно размера отцовского шрифта | | Устройства: | визуальные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту (4.0+) |
Свойство font-size задает размер шрифта для отображения содержимого элемента. Оно может задаваться несколькими способами:
xx-small | x-small | small | medium | large | x-large | xx-large
Задает абсолютный размер шрифта (от наименьшего к наибольшему).
smaller | larger
Задает размер шрифта относительно родительского шрифта (меньше или больше).
<размер>
Задает фиксированный размер. Отрицательные размеры недопустимы.
<процент>
Вычисляется относительно размера отцовского шрифта.
Фактическое значение этого свойства может отличаться от вычисленного по двум причинам: если шрифт не имеет заданного размера или под воздействием свойства font-size-adjust.
CSS2 рекомендует, чтобы последовательные значения абсолютных размеров шрифта отличались для экрана в 1.2 раза, однако это зависит от обозревателя. Пример отображения семи абсолютных размеров шрифтов:
xx-small
x-small
small
medium
large
x-large
xx-large
Аспект шрифта: свойство font-size-adjust
| Синтаксис: | font-size-adjust: none | <число> | inherit | | Начально: | none | | Применимо: | ко всем элементам | | Наследуемо: | да | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Не поддерживается | | | | Не поддерживается |
Свойство font-size-adjust задает аспект шрифта. Поясним его назначение подробнее.
В шрифтах, содержащих и строчные, и прописные буквы, субъективный внешний вид символа (т. е. то, насколько он кажется искаженным человеческому глазу) зависит от соотношения значения свойства font-size и величины x-height; в действительности, определяющим является их отношение, которое называется аспектом шрифта (aspect value) и равно font-size / x-height. Чем меньше аспект шрифта, тем скорее шрифт становится искаженным при уменьшении его размеров. Поэтому простое задание размера шрифта может приводить к неприятному для глаза отображению его символов.
Допустим теперь, что свойство font-family содержит список из нескольких названий шрифтов. Ясно, что размеры шрифта для отображения данного элемента подбирались автором, исходя из того, что он будет отображаться первым шрифтом в списке. Если же этот шрифт отсутствует на компьютере-клиенте, то обозреватель использует второй шрифт из списка. Но аспект этого шрифта имеет иное значение, чем аспект первого и, в итоге, внешний вид отображаемого текста может быть искажен. Для того, чтобы уменьшить возможное искажение, необходимо пересчитать размер символов для второго шрифта с учетом изменения аспекта. Но для этого обозреватель должен знать аспект первого шрифта, который на его компьютере как раз и отсутствует! Именно для того, чтобы сообщить ему эту информацию, и было введено данное свойство, которое может иметь следующие значения:
none
Не корректировать размер шрифта.
<число>
Задает аспект шрифта, как описано выше.
Рассмотрим следующий пример:
P {font-family: Verdana, sans-serif; font-size: 14px; font-size-adjust: 0.58 }
Шрифт Verdana имеет аспект 0.58, что и указано в значении свойства font-size-adjust. Если этот шрифт недоступен, то обозреватель использует родовой шрифт sans-serif. Допустим, что аспект этого шрифта равен 0.46. Тогда обозреватель пересчитает размер шрифта sans-serif по формуле 14px * (0.58 / 0.46) = 17.65px и будет отображать абзацы шрифтом с размером 18px (с учетом округления).
Свойства шрифта: свойство font
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Не поддерживается |
Свойство font является сокращением для свойств font-style, font-variant, font-weight, font-size, font-family и line-height. Оно позволяет задать все свойства шрифта одновременно. При этом сначала всем свойствам шрифта (включая font-stretch и font-size-adjust, хотя значения этих свойств данным свойством заданы быть не могут) присваиваются их начальные значения, а затем изменяются значения тех свойств, которые явно заданы в данном свойстве. Приведем несколько примеров:
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Georgia, serif; font-size-adjust: 1.16 }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt Helvetica, serif; font-stretch: condensed }
Это свойство позволяет также указать, что необходимо использовать один из системных шрифтов; в этом случае задается только название системного шрифта, и никакие другие характеристики шрифта указывать больше нельзя. Существуют следующие названия системных шрифтов:
| caption | Шрифт текста управляющих элементов (кнопок, меток и т. д.) | | icon | Шрифт меток иконок | | menu | Шрифт пунктов меню | | message-box | Шрифт диалоговых окон | | small-caption | Шрифт текста малых управляющих элементов | | status-bar | Шрифт статусной строки |
Пример отображения системных шрифтов:
caption
icon
menu
message-box
small-caption
status-bar
1 2 3 4
8 8 8
| |
*
Обратная связь