HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

В дополнение к базовым дескрипторам шрифта в CSS2 предусмотрен ряд расширенных дескрипторов, которые уточняют определение шрифта. Среднестатистическому разработчику веб страниц эти дескрипторы не нужны, но знатоки, возможно, сочтут их небесполезными.

Дескриптор unicode range принимает список значений Unicode, разделенных запятыми. Каждое значение состоит из префикса U+ и шестнадцатеричного числа. Вы можете указывать диапазоны значений, разделяя границы диапазона дефисом. Вопросительный знак соответствует любому значению в данной позиции.

Дескриптор unicode range призван точно указать глифы, определенные в шрифте. Если символы, используемые в документе, недоступны, броузер не загрузит шрифт. Так, значение U+2A70 показывает, что шрифт содержит соответствующий глиф в этой позиции. Запись U+2A7? задает символы от 2A70 до 2A7F, а запись U+2A70-2A9F – более широкий диапазон. Как правило, этот дескриптор применяется, чтобы ограничить использование специальных символов только теми, что определены в шрифте.

Дескриптор units-per-em принимает одно числовое значение, определяющее ширину самой широкой буквы в шрифте. Это значение, называемое «эм» (em), важно, если вы используете его как единицу измерения для задания значений других дескрипторов.

Дескриптор panose-1 принимает ровно десять целочисленных значений, разделенных пробелами и соответствующих особой характеристике шрифта, носящей имя Panose 1. Обсуждение Panose-1 выходит за рамки этой книги, и мы отсылаем заинтересованного читателя к специальной литературе.

Дескрипторы stemv и stemh определяют толщину (в «эмах») вертикальных и горизонтальных штрихов в начертании символов шрифта. Аналогичным образом дескрипторы cap-height и x-height определяют высоту глифов в верхнем и нижнем регистре. Наконец, дескрипторы ascent и descent определяют максимальные размеры верхнего и нижнего элементов шрифта. Если вы используете любой из этих дескрипторов,
вы должны задать дескриптор units-per-em.

Дескриптор slope определяет наклон вертикальных штрихов шрифта. Он играет важную роль при поиске курсивных и наклонных версий шрифта.

Дескрипторы baseline, centerline, mathline и topline определяют обычную, центральную, математическую и верхнюю базовые линии шрифта. Все они принимают числовые значения, выраженные в «эмах». Для них вы тоже должны задать дескриптор units-per-em.

Дескриптор bbox принимает ровно две пары координат (X, Y), определяющие левый нижний и правый верхний углы ограничивающего прямоугольника шрифта. Дескриптор bbox важен, когда броузер решает синтезировать шрифт на основе данного. Указывая размеры ограничивающего прямоугольника, вы гарантируете, что синтезированный
шрифт займет столько же места, сколько и запрошенный.

Дескриптор widths принимает список диапазонов Unicode-кодов, перечисленных через запятую, за которыми следуют отделенные пробелами значения, определяющие ширину символов в диапазоне. Если вы укажете одно значение для диапазона, все символы в диапазоне будут иметь одинаковую ширину. Когда указаны несколько значений, каж
дое относится к соответствующему символу из диапазона. Подобно дескриптору bbox дескриптор widths обеспечивает хорошую степень совпадения синтезированного шрифта с запрошенным.

И наконец, необязательный дескриптор definitions-src задает URL-адрес файла, содержащего все дескрипторы шрифта. Это удобно при детализированном определении шрифта. Вместо того чтобы включать длинное описание в каждый документ или стилевую таблицу, где используется этот шрифт, вы задаете дескрипторы один раз в отдельном файле и ссылаетесь на него с помощью дескриптора definitions-src.

Базовые дескрипторы шрифта, указываемые в специальной директиве @font-face, соответствуют шрифтовым свойствам CSS2 и принимают те же значения, что и эти свойства. Иными словами, вы можете указывать дескрипторы font-family, font-style, font-variant, font-weight, font-stretch и font-size и их допустимые значения, чтобы определить
новый шрифт для броузера. Например:

@font-face {
Font-family : «Kumquat Sans»;
Font-style : normal, italic;
src : url(»http://www.kumquat.com/foundry/kumquat-sans»)
}

Здесь определяется шрифт Kumquat Sans, который можно загрузить ссайта www.kumquat.com. Для этого загружаемого шрифта доступны обычная версия и курсив. Поскольку другие дескрипторы не указаны, броузер будет предполагать, что остальные свойства шрифта (жирность, вариант и т. д.) определяются в самом шрифте.

В общем случае отсутствие какого либо дескриптора шрифта позволяет броузеру брать для соответствующего свойства любое значение. Указывая одно или несколько значений дескриптора шрифта, вы ограничиваете для броузера набор допустимых значений. Поэтому, когда вы определяете шрифт таким способом, вам следует быть как мож
но конкретнее, чтобы броузер впоследствии сделал оптимальный выбор. Например, если у шрифта нет курсивной версии и вы ничего не предложите броузеру, он может использовать неподходящий шрифт, когда встретит запрос на курсив для этого шрифта.

В стандарте CSS2 алгоритм соответствия шрифтов состоит из четырех шагов. Первый шаг заключается в применении указанного шрифта, если он находится на компьютере пользователя. Это может быть одно из нескольких семейств шрифтов, указанных в стилевом правиле и подставленных в порядке появления.

Второй шаг предпринимается, когда ни один из шрифтов, перечисленных в правиле, не установлен на компьютере пользователя. Броузер пытается найти наиболее похожий из локальных шрифтов. Например, запрос на шрифт Helvetica может привести к использованию шрифтаArial – аналогичного шрифта без засечек.

Третий шаг алгоритма состоит в попытке броузера синтезировать шрифт путем модифицирования локального шрифта в соответствии с указанным. Например, запрос на шрифт Helvetica размером 72 пункта можно удовлетворить за счет масштабирования 12 пунктового шрифта Arial до требуемого размера.

При неудачном завершении трех предыдущих шагов броузер может предпринять четвертый и загрузить требуемый шрифт, если автор предоставил подходящее определение внешнего шрифта. Такие определения создаются с помощью специальной директивы @font-face, имеющей такой синтаксис:

@font-face {
descriptor : value;
…
descriptor : value
}

Каждая специальная директива @font-face определяет для броузера новый шрифт. Последующие запросы на шрифты могут быть удовлетворены этими новыми шрифтами. Броузер использует различные дескрипторные значения, чтобы гарантировать соответствие подставленного шрифта запрошенному.

Первый CSS-стандарт, CSS1, определял упрощенный алгоритм соответствия шрифтов. Если указанный шрифт отсутствует на компьютере клиента, следует подставить неспецифичный шрифт. Конечно, результаты в большинстве случаев не радуют глаз и способны вызвать полный беспорядок на экране. Кроме того, нередко оказывается, что
какой то из имеющихся шрифтов подошел бы лучше, чем шрифт общего назначения. Стандарт CSS2 значительно расширяет модель соответствия шрифтов, принятую в CSS1, и содержит новую специальную директиву (так называемое правило at), позволяющую авторам определять, загружать и использовать в документах новые шрифты.

Чаще, чем хотелось бы, приходится сразу определять не одно, а несколько свойств шрифтов, чтобы отрегулировать отображение тега. Полная спецификация шрифта может оказаться несколько громоздкой:

p {fon-family: Times, Garamond, serif;
font-weight: bold;
font-size: 12pt;
line-height: 14pt}

Чтобы сократить эти трудоемкие и, вероятно, неудобные для восприятия описания, используйте всеобъемлющее свойство font и соберите все объявления в одно:

p {font: bold 12pt/14pt Times, Garamond, serif}

Группировка атрибутов шрифтов и порядок их перечисления существенны для свойства font. Первыми нужно указывать атрибуты стиля, жирности и варианта шрифта, за которыми должны следовать размер шрифта и высота строки, разделенные слэшем, и последним задается список гарнитур. Из всех свойств обязательны размер и гарнитура;
прочие могут быть опущены.

Вот несколько примеров определения свойства font:

em {font: italic 14pt Times}
h1 {font: 24pt/48pt sans-serif}
code {font: 12pt Courier, monospace}

Первый пример сообщает поддерживающему стили броузеру, что логическое подчеркивание следует выразить, использовав курсивный шрифт Times размером 14 пунктов. Второе стилевое правило говорит о том, что текст в теге <h1> отображается имеющимся в наличии шрифтом семейства sans serif размером 24 пункта с 24 пунктами дополнительного расстояния между строками. Наконец, для текста в теге <code> установлен Courier или, если его нет, выбранный по усмотрению броузера моноширинный шрифт размером 12 пунктов.

Вообразите сами, какие безобразия можно натворить, изобретательно применяя стили шрифтов. Если у вас не получается, загляните в последний номер журнала «Wired».

Свойство font weight заведует весом или жирностью букв. По умолчанию принимается значение normal. Можно установить значение bold, чтобы получить жирную версию шрифта, или использовать относительные значения bolder и lighter для применения версии, которая будет более или соответственно менее жирной, чем принятая для роди
тельского элемента.

Для определения различных уровней «жирности» текста используются числа, кратные 100, от 100 (самый тонкий) до 900 (самый жирный). Значение 400 соответствует значению normal, а 700 соответствует bold.

Все современные броузеры поддерживают это свойство.

Свойство font-variant позволяет выводить текст маленькими заглавными буквами. Принятое по умолчанию значение этого свойства – normal – указывает на традиционную версию шрифта. Но вы можете придать этому свойству значение small-caps, выбирая версию, в которой строчные буквы заменяются маленькими заглавными (т. е. капителью).

Все современные броузеры поддерживают это свойство. Internet Explorer версий 4 и 5 некорректно реализует small-caps, выводя текст заглавными буквами.

Используйте свойство font-style, чтобы отобразить текст наклонно. По умолчанию принимается стиль normal, который можно переменить на italic или oblique. К примеру:

h2 {font-style: italic}

выводит текст в заголовках уровня 2 курсивом. Netscape 4 поддерживает только значение italic для свойства font-style. Все современные броузеры воспроизводят оба значения, но обычно трудно отличить курсив от наклонного начертания.

Если не вдаваться в тонкости, то разборчивость и видимый размер шрифта зависят в основном от его характеристического отношения (aspect ratio) – отношения высоты строчной буквы к номинальному размеру (измеряемому по высоте заглавной буквы). Шрифты с характеристическим отношением, приближающимся к единице, разборчи
вей при мелком размере, чем шрифты с этим отношением вблизи нуля.

Кроме того, в зависимости от величины характеристического отношения видимый размер одного шрифта может быть явно больше или меньше другого шрифта, хотя их номинальные размеры одинаковы. Поэтому, когда один шрифт оказывается недоступным для броузера, применение его заменителя может исказить внешний вид документа.

Свойство font-size-adjust позволяет подогнать размер замещающего шрифта с учетом его характеристического отношения, чтобы он наилучшим образом подходил для отображения. Используйте значение этого свойства none, чтобы игнорировать характеристическое отношение. В противном случае присвойте свойству десятичное дробное число в интервале от нуля до единицы. Обычно назначается характеристическое отношение для шрифта, который должен быть выбран в первую очередь. Владеющий стилями броузер выведет тогда замещающий шрифт с размером, вычисленным по формуле:

s = (n/a) * fs

где s – это новый размер, используемый для вывода замещающего шрифта, вычисленный как частное от деления значения n свойства font-size-adjust на характеристическое отношение замещающего шрифта “а” и умноженное затем на размер текущего шрифта fs. К примеру, предположим, что вы предлагаете вывести текст шрифтом Times New Roman с характеристическим отношением 0,45, но броузер его не обнаруживает и применяет вместо него шрифт Comic Sans MS с отношением 0,54. Тогда, чтобы сохранить приблизительно тот же видимый размер (для Times New Roman это 18 px), поддерживающий стандарт CSS2 броузер, учитывая значение свойства font-size-adjust (0,45 для Times New Roman), выведет на экран или напечатает текст шрифтом Comic Sans Microsoft с меньшим размером 0,45/0,54×18 px = 15 px. К сожалению, мы не можем показать вам, как популярные броузеры это делают, так как они это не поддерживают.

Помимо шрифтов различных размеров их семейства содержат уплотненные и разреженные версии, символы в которых либо сжаты, либо растянуты. Применяйте свойство font-stretch для выбора более сжатых или более растянутых символов вашего шрифта.

Используйте значение свойства normal, чтобы остановиться на версии шрифта нормального размера. Относительные значения wider и narrower выбирают следующий, более широкий или соответственно более узкий варианты начертания шрифта, но не шире и не уже крайних («ultra») версий семейства.

Оставшиеся значения свойства font-stretch назначают определенные варианты из семейства шрифтов. Начиная с самого плотного и заканчивая самым жидким, значения таковы: ultra-condensed, extra-con densed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded и ultra-expanded.

Свойство font-stretch предполагает, естественно, что на компьютере поддерживаются растягиваемые шрифты. Тем не менее современные популярные броузеры игнорируют это свойство.