Про шрифты с продолжением. Часть 10
Шрифты и Интернет
Изначально вся информация в Интернете была представлена в виде текста. Не было никаких таблиц, рисунков или фоновых цветов. Автор еще помнит, каким был Интернет до первого графического браузера Mosaic и HTML официально непризнанной версии 1.2: серые страницы, черный текст, синие ссылки. Таблицы и вставка рисунков, обтекаемых текстом, появились лишь в третьей версии стандарта HTML. Примерно в это же время возникла и профессия вебдизайнера. Потому что вместе с третьей версией стандарта разметки гипертекста были созданы инструменты, с помощью которых можно было делать красивые вебстраницы.
Но давайте вернемся к основам…
HTML и XML, которые принято сваливать в одну кучу, произошли от SGML. HTML — это приложение SGML, а XML — это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. SGML (англ. Standard Generalized Markup Language) — стандартный обобщенный язык разметки. HTML (англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.
HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области верстки. Он успешно справлялся с проблемой сложности SGML путем определения небольшого набора структурных и семантических элементов — тэгов (дескрипторов). С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без привязки их к средствам воспроизведения (отображения). В идеале текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).
А как же оформление? Современные версии языка HTML (4.01 от 24.12.1999 г. и еще не принятая официально 5.0) содержат достаточное количество элементов, позволяющих оформить документ по вашему вкусу.
С самого начала надо уяснить, что разметка текста производится с помощью тэгов. Тэг — элемент HTML, представляющий собой текст, заключенный в угловые скобки “< >”. Тэг — это активный элемент, изменяющий представление следующей за ним информации. Он может иметь некоторые атрибуты. Обычно используются два тэга — открывающий и закрывающий.
Структура HTML-документа
Для того чтобы текстовый файл преобразовался в HTMLфайл, поменять его расширение с *.txt на *.html недостаточно. Надо применить правило первой строки.
Каждый HTMLдокумент, отвечающий спецификации HTML какойлибо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN">
Это поможет браузеру определить, как правильно интерпретировать документ. В данном случае мы говорим браузеру, что наш документ HTML соответствует международной спецификации версии 4.0.
На самом деле одной строки для создания документа мало. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэгаконтейнера <HTML>. Следует отметить, что любой HTMLдокумент открывается тэгом <HTML> и им же закрывается — </HTML>.
Между тэгами <HTML> и </HTML> нужно разместить заголовок и тело документа:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
<!... это комментарий, он не отображается на странице ...>
</HEAD>
<BODY>
Это тело документа — именно в теле документа содержится все то, что мы видим на вебстранице.
</BODY>
</HTML>
Из схемы видно, что документ состоит из двух основных блоков — заголовка и тела документа. Заголовок определяется с помощью элемента HEAD, а тело — элементом BODY. Комментарий скрыт от читателя и применяется для удобства тех, кто работает с исходниками документов. Заголовок может содержать техническую информацию о документе, хотя чаще всего применяется только для обозначения его названия. Тело документа содержит всё то, что отображается на странице: текст, картинки, таблицы.
Заголовок документа
Заголовок cоздается с помощью элемента HEAD, между тэгами которого размещаются элементы, содержащие техническую информацию о документе. Элементы, относящиеся к заголовку: HEAD, TITLE, BASE, STYLE, LINK, META.
HEAD определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.
TITLE определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTMLдокумента и может быть указан не более одного раза.
BASE указывает базовый адрес текущего документа, который станет отправной точкой для расчета относительных адресов внутри документа.
STYLE — используется для вставки в документ таблицы стилей (Cascade Style Sheet, CSS). Об этом чуть ниже.
LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Используется чаще всего для внедрения CSS из отдельного файла.
МЕТА применяется для описания документа, который представляет собой метаданные в виде пары «имя—значение». С помощью этого элемента в заголовок документа вводится полезная дополнительная информация, невидимая для читателя, но нужная для правильной индексации страницы роботами поисковых серверов.
Тело документа
BODY указывает начало и конец тела HTMLдокумента. Между начальным и конечным тэгами <BODY> </BODY> содержатся: текст документа; изображения; таблицы; все HTMLэлементы, отвечающие за отображение документа и управление им, а также гипертекстовые ссылки. Элемент BODY может встречаться в документе не более одного раза.
Далее мы опустим все элементы разметки документов, которые не касаются логической или физической разметки текста.
HTML-документ
Форматирование текста
Существует два главных класса текстовой разметки: логическая и физическая (визуальная). В первом случае речь идет только о том, какую роль играет данный участок документа в его общей структуре (например, «данная строка является заголовком третьего уровня»). Во втором случае определяется, как именно будет отображаться этот элемент (например, «данную строку следует отображать полужирным начертанием, шрифтом Arial, размером в 14 pt»). То есть недостаточно выделить полужирным шрифтом строку и таким образом сделать ее заголовком. В структуре документа она станет заголовком, только если указать это явным образом.
Если всё размечено правильно, то это упрощает автоматическую обработку документа и его отображение на различных устройствах (экран компьютера, мобильного телефона и при выводе на печать).
Текстовые блоки
Под текстовыми блоками подразумеваются элементы, разбивающие текст документа на смысловые части тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки.
К тэгам уровня текстовых блоков относятся:
H1,H2,...H6;
P;
DIV;
ADDRESS;
BLOCKQUOTE;
BR;
HR;
PRE;
LISTING, PLAINTEXT, XMP.
H1, H2, H3, H4, H5, H6
(Header — заголовок)
Данные тэги используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни — разделы и подразделы. Параметры: ALIGN — определяет способ выравнивания заголовка по горизонтали: LEFT — слева, RIGHT — справа, CENTER — по центру.
P
(Paragraph — параграф)
Данный тэг применяется для разметки параграфов. Параметры: ALIGN — определяет способ выравнивания заголовка по горизонтали: LEFT — слева, RIGHT — справа, CENTER — по центру.
DIV
(Division — отдел, логический блок)
Используется для отделения блока HTMLдокумента от остальной части документа. Находящиеся между начальным и конечным тэгами текст или HTMLэлементы оформляются как отдельный параграф. Параметры: ALIGN — определяет способ выравнивания заголовка по горизонтали: LEFT — слева, RIGHT — справа, CENTER — по центру. Есть и еще одно значение — JUSTIFY, поддерживаемое современными браузерами. Оно позволяет равномерно выравнивать текст одновременно по левому и правому краям документа. Применяется как удобный контейнер для объектов страницы, которым легко динамически манипулировать — перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. Находящиеся между начальным и конечным тэгами текст или HTMLэлементы по умолчанию оформляются как отдельный параграф.
ADDRESS
Находящийся между начальным и конечным тэгами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.
BLOCKQUOTE
(Block Quote — блок с цитатой)
Представляет находящийся между начальным и конечным тэгами текст как цитату. Как правило, используется для длинных цитат. Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
BR
(Break — разрыв (строки))
Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию ENTER в текстовом редакторе.
HR
(Horisontal rule — горизонтальная линия)
Вставляет в текст горизонтальную разделительную линию.
PRE
(Preformatted text — предварительно отформатированный текст)
Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое между этими тэгами с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки.
LISTING, PLAINTEXT, XMP
Данные тэги предназначены для воспроизведения предварительно отформатированного текста. Они использовались до появления тэга PRE и сегодня считаются устаревшими. Но браузеры поддерживают их в целях обратной совместимости версий.
Текст
Здесь мы плавно переходим к тэгам, прменяемым для форматирования текста. К ним относятся:
BASEFONT;
FONT;
I;
EM;
B;
STRONG;
U;
S, STRIKE;
SUP;
SUB;
CODE, SAMP;
TT;
KBD;
VAR;
CITE.
BASEFONT
(Base font — базовый (основной) шрифт)
Определяет основной шрифт, которым должен отображаться текст документа. Впоследствии можно легко изменить шрифт в любой локальной части документа, используя тэг FONT.
FONT
Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Параметры:
SIZE — определяет размер шрифта. Возможные значения: целое число от 1 до 7;
COLOR — определяет цвет текста. Задается либо RGBзначением в шестнадцатеричной системе, либо одним из 16 базовых цветов;
FACE — определяет используемый шрифт. Например:
<FONT SIZE="3" FACE="Courier" COLOR="Blue">
I
(Italic — курсив)
Текст, заключенный между начальным <I> и конечным </I> тэгами, будет отображен курсивом.
EM
(Emphasis — акцент)
Логическое ударение. Применяется для смыслового выделения текста, стоящего между начальным <EM> и конечным </EM> тэгами. Результат обычно отображается курсивом. То есть элемент “EM” визуально по действию практически аналогичен элементу “I”.
B
(Bold — жирный)
Текст, заключенный между начальным <B> и конечным </B> тэгами, будет выделен жирным шрифтом.
STRONG
(Stronger emphasis — сильный акцент)
Усиленное выделение. Текст, заключенный между начальным <STRONG> и конечным </STRONG> тэгами, будет выделен жирным шрифтом. Таким образом, элемент “STRONG” визуально по действию аналогичен элементу “B”.
U
(Underline — подчеркивание)
Данный элемент отображает помещенный между начальным <U> и конечным </U> тэгами текст как подчеркнутый.
S, STRIKE
Элемент STRIKE отображает помещенный между начальным <STRIKE> и конечным </STRIKE> тэгами текст как перечеркнутый. В HTML 3.2 вместо STRIKE был предложен более краткий тэг S. Но в браузерах поддерживаются оба варианта.
SUP
(Superscript — верхний индекс)
Отображает текст со сдвигом вверх и уменьшением размера текущего шрифта на одну единицу.
SUB
(Subscript — нижний индекс)
Отображает текст со сдвигом вниз и уменьшением размера текущего шрифта на единицу.
CODE, SAMP
Данные тэги оформляют текст как формулу или программный код. Текст при этом, как правило, отображается моноширинным шрифтом.
TT
(Tele Type — телетайп)
Данный элемент отображает помещенный между начальным <TT> и конечным </TT> тэгами текст моноширинным шрифтом.
KBD
(Keyboard — клавиатура)
Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило, текст, заключенный между начальным и конечным тэгами, выделяется жирным моноширинным шрифтом.
VAR
(Variable — переменная)
Тэг предназначен для обозначения в тексте переменных. Как правило, отображается курсивом.
CITE
(Citation — цитата)
Оформляет находящийся между начальным и конечным тэгами текст как цитату или ссылку на источник. Обычно используется для коротких цитат. Цитируемый текст отображается курсивом.
Маловато будет!
Как видите, при всём богатстве инструментов форматирования текста для шрифтов мы можем управлять лишь тремя параметрами — кеглем, цветом и гарнитурой. В обобщенном виде это может выглядеть так:
<font face=”Verdana” size=”3” color=”#000000”>
Совсем другое дело — каскадируемые стили (CSS). Конструкции типа:
@fontface { fontfamily: mGillSans; fontstyle: normal; fontweight: normal; src: url (stuff/GILLSAN0.eot); }
.gillsans { fontfamily: GillSans, Verdana, Sansserif}
.default { fontfamily: Verdana, Sansserif; fontsize: 12pt}
.todo { fontsize: 14pt; color: #FF0000}
предоставляют гораздо большую свободу в управлении шрифтами. Причем можно управлять практически всеми свойствами документа — текстом, полями, отступами, границами и шрифтами.
Можно управлять такими свойствами шрифтов, как:
- fontfamily — семейство шрифтов;
- fontstyle — стиль шрифта;
- fontvariant — вариант шрифта;
- fontweight — насыщенность шрифта;
- fontsize — размер шрифта;
- font — сокращенная запись.
Font-family (семейство шрифта)
Свойство fontfamily указывает приоритетный список шрифтов, используемых для отображения данного элемента или вебстраницы в целом. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, то ищется следующий шрифт списка, пока не будет найден подходящий.
Рис. 2. Cascading Style Sheets во всем своем разнообразии
Для категоризации шрифтов применяются два типа имен: имя семейства (familyname) и общее семейство (generic family).
Family-name
Familyname — это, например, Arial, Times New Roman или Tahoma, то есть просто имя шрифта. Суть состоит в том, что в процессе создания вебстраниц можно указать не конкретный шрифт, а несколько стилистически похожих. В процессе вывода страницы на экран будет подставляться существующий шрифт, первым встреченный в определенном списке. Например, указав в тэге определения шрифта Verdana, Arial, Helvetica, можно ожидать того, что текст будет отображен какимлибо из перечисленных гротесков.
Generic family
Общее семейство — это группа familynames, имеющих общие характерные черты. Пример — sansserif, набор шрифтов без засечек. Данный метод определения шрифта хорошо работает в конструкции типа Verdana, Arial, Helvetica, Sansserif. Пользователи, которые просматривают вашу страницу и не имеют шрифта Verdana, получат текст, набранный Arial, Helvetica или, в случае отсутствия всех указанных шрифтов, чемто похожим из семейства sansserif. Согласитесь, это не совсем то, на что вы рассчитывали, но всетаки лучше, чем ничего. Радует, что технологии продолжают развиваться. Например, автору встречался Javaскрипт (http://www.webreference.com/dhtml/), который проверяет список шрифтов, установленных на пользовательской машине, и делает соответствующую подстановку для правильного отображения текста страницы. Правда, подобные изыски умельцев единичны и не имеют широкого распространения.
Возможны следующие значения Generic family:
- serif — шрифты с засечками (антиквенные) типа Times;
- sansserif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Helvetica;
- cursive — курсивные шрифты;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (например, шрифт Courier);
- inherit — наследует значение родителя.
Font-style (стиль шрифта)
Свойство fontstyle определяет начертания шрифта. Может принимать следующие значения:
- normal — обычное начертание текста;
- italic — курсивное начертание;
- oblique — наклонное начертание. Курсив и наклонный шрифт при всей их похожести — не одно и то же. Курсив — это специальный шрифт, имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо;
- fontstretch — можно осуществить выбор нормального, сжатого или разреженного начертания из гарнитуры шрифтов. Абсолютные значения, соответствующие ключевым словам, упорядочены, начиная с самого узкого типа начертания и заканчивая самым широким следующим образом: ultracondensed, extracondensed, condensed, semicondensed, normal, semiexpanded, expanded, extraexpanded, ultraexpanded. При этом относительное ключевое слово wider задает значение, превосходящее наследуемое значение (если последнее не равно ultraexpanded), а относительное ключевое слово narrower задает значение, которое меньше наследуемого значения (если последнее не равно ultracondensed);
- inherit — наследует значение родителя.
Font-variant (вариант шрифта)
Свойство fontvariant используется для выбора между вариантами normal и smallcaps. В варианте smallcaps вместо букв нижнего регистра применяются малые заглавные буквы (upper case). Более привычное для нас название — капитель.
Font-weight (насыщенность шрифта)
Свойство fontweight описывает, насколько насыщенным должен отображаться шрифт. Он может быть bold (полужирным), bolder (более жирным), lighter (более светлым) и normal (нормальным). Некоторые браузеры поддерживают даже числовые значения от 100 до 900 (в сотнях) для описания «веса» шрифта (от светлого к более темному соответственно).
Font-size (размер шрифта)
Для описания размера шрифта применяются различные единицы измерения (например, пикселы, пункты и проценты). Также можно использовать такую относительную единицу, как еm. Эта масштабируемая единица равна текущему fontsize, например если fontsize в документе 12 pt, то 1 em равен 12 pt. Соответственно 2 em будет равно 24 pt, 0,5 em — 6 pt и т.д. Em всё чаще применяется в вебдокументах благодаря масштабируемости и поддержке в мобильных устройствах. Впрочем, это же относится и к процентам.
Традиционно шрифты измеряются в пунктах. Пункт равен 1/72 дюйма. Однако мы рассматриваем экранную типографику, а при разговоре об экранах приходится опираться на другое понятие — пиксел. CSS позволяет дизайнеру непосредственно указывать размер шрифта в пикселах. Но вот незадача — это может вызвать ряд проблем, например сбой принтера, который не сможет при распечатке вебстраницы перевести пикселы в пункты (это абсолютно реальный случай).
Я неслучайно останавливаюсь на частных случаях. CSS является очень гибкой технологией, и, используя ее правильно, можно предусмотреть практически любые критические ситуации. Вот пример решения проблемы для страницы, которую будут не только читать с экрана, но и распечатывать на принтере:
<style type=”text/css” media=”print”>
.someClassName { fontfamily: Bodoni, Georgia, serif; fontsize: 10pt }
</style>
<style type=”text/css” media=”screen”>
.someClassName { fontfamily: Georgia, serif; fontsize: 12px }
</style>
Или если вы прилинковываете стили:
<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen.css”/>
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”/>
Font (сокращенная запись)
Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле. Например, обычная конструкция описания свойств шрифта для параграфа выглядит так:
p {
fontstyle: italic;
fontweight: bold;
fontsize: 30px;
fontfamily: arial, sansserif;
}
Применяя сокращенную запись, код можно упростить и сократить:
p {
font: italic bold 30px arial, sansserif;
}
При этом порядок свойств font такой:
fontstyle | fontvariant | fontweight | fontsize | fontfamily
Нужно больше возможностей?
Еще несколько лет назад тему шрифтов и CSS на этом можно было бы закрыть. Однако технологии не стоят на месте. Теперь технология каскадирования стилей предлагает еще больше возможностей по управлению шрифтами в интернетпространстве.
В CSS2, как и в CSS1, модель шрифтов основывается на предположении, что в распоряжении пользователя имеется некая «база шрифтов». В CSS1 осуществлялось обращение к этой базе, но никогда не конкретизировалось ее содержимое. В CSS2, напротив, формируется представление о содержимом базы данных и разработчикам таблиц стилей разрешается с ним взаимодействовать.
Если необходимо отобразить символ с использованием определенного шрифта, то браузер пользователя в первую очередь ищет в этой базе наиболее подходящий шрифт (с помощью алгоритма сопоставления шрифтов). Как только он находит его, то сразу извлекает данные этого шрифта с локального диска или из сети, а затем отображает требуемый символ с прменением глифов, содержащихся в найденном шрифте.
В свете данной модели спецификация была разбита на два раздела. Первый посвящен механизмам описания шрифтов, посредством которых разработчики указывают, какие шрифты они бы хотели использовать. Второй посвящен механизмам выбора шрифтов, с помощью которых браузер пользователя определяет и загружает шрифт, наилучшим образом соответствующий спецификации разработчика.
Дескрипторы, используемые для оценки данных о шрифте, — ‘unicode-range’
При описании шрифта данный дескриптор использовать необязательно, хотя это позволило бы избежать проверки или загрузки шрифта, не обладающего достаточным количеством глифов для отображения определенных символов.
Схематически это выглядит так:
‘unicoderange’ (дескриптор) Значение: <urange> [, <urange>]
Начальное значение: U+07FFFFFFF
Например:
@fontface { fontfamily: «Metabook Italic»;
fontstyle: italic;
unicoderange: U+0020, U+0300E, U+1E??, U+2000F;
src: url(«http://www.prodtp.ru/web/fonts/mbooki.otf»)
format(“opentype”);
}
Это дескриптор набора символов из стандарта ISO 10646, содержащихся в данном шрифте.
Значения <urange> задаются с помощью префикса U+, следом за которым указывается шестнадцатеричное число, являющееся кодом символа в системе ISO 10646 (табл. 1).
Таблица 1. Диапазоны Unicode (из описания формата TrueType версии 1.66, Microsoft)
Мн-во |
Плюс |
Имя блока |
Диапазон Unicode |
0 |
1 |
Basic Latin |
U+0-7F |
1 |
2 |
Latin-1 Supplement |
U+80-FF |
2 |
4 |
Latin-1 Extended-A |
U+100-17F |
3 |
8 |
Latin Extended-B |
U+180-24F |
4 |
1 |
IPA Extensions |
U+250-2AF |
5 |
2 |
Spacing Modifier Letters |
U+2B0-2FF |
6 |
4 |
Combining Diacritical Marks |
U+300-36F |
7 |
8 |
Greek |
U+370-3CF |
8 |
1 |
Greek Symbols and Coptic |
U+3D0-3EF |
9 |
2 |
Cyrillic |
U+400-4FF |
10 |
4 |
Armenian |
U+530-58F |
11 |
8 |
Hebrew |
U+590-5FF |
12 |
1 |
Hebrew Extended-A Hebrew Extended-B |
|
13 |
2 |
Arabic |
U+600-69F |
14 |
4 |
Arabic Extended |
U+670-6FF |
15 |
8 |
Devanagari |
U+900-97F |
16 |
1 |
Bengali |
U+980-9FF |
17 |
2 |
Gurmukhi |
U+A00-A7F |
18 |
4 |
Gujarati |
U+A80-AFF |
19 |
8 |
Oriya |
U+B00-B7F |
20 |
1 |
Tamil |
U+B80-BFF |
21 |
2 |
Telugu |
U+C00-C7F |
22 |
4 |
Kannada |
U+C80-CFF |
23 |
8 |
Malayalam |
U+D00-D7F |
24 |
1 |
Thai |
U+E00-E7F |
25 |
2 |
Lao |
U+E80-EFF |
26 |
4 |
Georgian |
U+10A0-10EF |
27 |
8 |
Georgian Extended |
U+10F0-10FF |
28 |
1 |
Hangul Jamo |
U+1100-11FF |
29 |
2 |
Latin Extended Additional |
|
30 |
4 |
Greek Extended |
U+1F00-1FFF |
31 |
8 |
General Punctuation |
U+2000-206F |
32 |
1 |
Superscripts and Subscripts |
|
33 |
2 |
Currency Symbols |
U+20A0-20CF |
34 |
4 |
Combining Marks for Symbols |
U+20D0-20FF |
35 |
8 |
Letterlike Symbols |
U+2100-214F |
36 |
1 |
Number Forms |
U+2150-218F |
37 |
2 |
Arrows |
U+2190-21FF |
38 |
4 |
Mathematical Operators |
U+2200-22FF |
39 |
8 |
Miscellaneous Technical |
U+2300-23FF |
40 |
1 |
Control Pictures |
U+2400-243F |
41 |
2 |
Optical Character Recognition |
U+2440-245F |
42 |
4 |
Enclosed Alphanumerics |
U+2460-24FF |
43 |
8 |
Box Drawing |
U+2500-257F |
44 |
1 |
Block Elements |
U+2580-259F |
45 |
2 |
Geometric Shapes |
U+25A0-25FF |
46 |
4 |
Miscellaneous Symbols |
U+2600-26FF |
47 |
8 |
Dingbats |
U+2700-27BF |
48 |
1 |
CJK Symbols and Punctuation |
U+3000-303F |
49 |
2 |
Hiragana |
U+3040-309F |
50 |
4 |
Katakana |
U+30A0-30FF |
51 |
8 |
Bopomofo |
U+3100-312F |
52 |
1 |
Hangul Compatibility Jamo |
U+3130-318F |
53 |
2 |
CJK Miscellaneous |
|
54 |
4 |
Enclosed CJK Letters and Months |
U+3200-32FF |
55 |
8 |
CJK compatibility |
U+3300-33FF |
56 |
1 |
Hangul |
U+AC00-D7FF |
59 |
8 |
CJK Unified Ideographs |
U+4E00-9FFF |
60 |
1 |
Private Use Area |
U+E000-F8FF |
61 |
2 |
CJK Compatibility Ideographs |
U+F900-FAFF |
62 |
4 |
Alphabetic Presentation Forms |
U+FB00-FB4F |
63 |
8 |
Arabic Presentation Forms-A |
U+FB50-FDFF |
64 |
1 |
Combining Half Marks |
U+FE20-FE2F |
65 |
2 |
CJK compatibility Forms |
U+FE30-FE4F |
66 |
4 |
Small Form Variants |
U+FE50-FE6F |
67 |
8 |
Arabic Presentation Forms-B |
U+FE70-FEFF |
68 |
1 |
Halfwidth and Fullwidth Forms |
U+FF00-FFEF |
69 |
2 |
Specials |
U+FFF0-FFFD |
Например, U+05D1 кодирует символ «еврейская буква bet» в системе ISO 10646. К значениям, выходящим за рамки основной многоязыковой базы (Basic Multilingual Plane), спереди добавляется дополнительное шестнадцатеричное число, соответствующее уровню базы. Например, U+A1234 представляет символ в базе десятого уровня с шестнадцатеричным кодом, равным 1234. Использование нулей в начале кода (например, 0000004D) допускается, но нежелательно.
Начальное значение данного дескриптора покрывает не только всю основную многоязыковую базу, выраженную значением U+0FFFF, но и весь набор символов из ISO 10646. Таким образом, начальное значение указывает на то, что шрифт может содержать глифы для любого символа из ISO 10646. Присваиваемое дескриптору ‘unicoderange’ значение задает ограниченный набор символов, для которых в шрифте найдется соответствующий глиф, и тем самым предоставляет информацию, позволяющую повысить эффективность поиска глифов. При этом отпадает необходимость в выполнении поиска глифов для символов, находящихся за пределами указанного диапазона.
Значения могут быть заданы с использованием любого количества чисел. В любом числе вместо универсального символа «?», занимающего позицию одной цифры, может подставляться любая цифра, благодаря чему охватывается диапазон символов. Таким образом, при применении одного числа можно достичь следующих результатов:
- unicoderange: U+20A8 — нет универсальных символов — указывается на код одного символа (ндийской денежной единицы, рупии);
- unicoderange: U+217? — один универсальный символ — охватываются символы (дроби), код которых лежит в диапазоне от 2170 до 217F;
- unicoderange: U+00?? — два универсальных символа — охватываются символы (Latin1), код которых лежит в диапазоне от 0000 до 00FF;
- unicoderange: U+E?? — два универсальных символа — охватываются символы (шрифт Lao), код которых лежит в диапазоне от 0E00 до 0EFF.
В этом формате для определения больших диапазонов можно использовать пару чисел, объединенных с помощью тире. Например:
- unicoderange: U+AC00D7FF — охватывается диапазон от AC00 до D7FF (область символов Hangul Syllables).
Существует возможность создания множества прерывистых диапазонов, разделенных запятыми. При этом так же, как и в других списках CSS, элементы которых разделены запятыми, любой символ пробела, расположенный до и после запятой, игнорируется. Например:
- unicoderange: U+3703FF, U+1F?? — охватывается диапазон от 0370 до 03FF (современный греческий язык) и от 1F00 до 1FFF (старый политонический греческий язык);
- unicoderange: U+3000303F, U+3100312F, U+32??, U+33??, U+4E009FFF, U+F9000FAFF, U+FE30FE4F — если исходить из количества требуемых пояснений, то эта запись представляет собой один из наихудших случаев, здесь с большой точностью указано, что этот (чрезмерно большой) шрифт содержит исключительно китайские символы (не включает никаких символов, происходящих из японского или корейского языков), принадлежащие стандарту ISO 10646. Диапазон включает значения, входящие в интервал от 3000 до 303F (китайскокорейскояпонские символы и знаки пунктуации), от 3100 до 312F (Bopomofo), от 3200 до 32FF (китайскокорейскояпонские вложенные буквы и обозначения месяцев), от 3300 до 33FF (область китайскокорейскояпонской совместимости), от 4E00 до 9FFF (обобщенные китайскокорейскояпонские идеограммы), от F900 до FAFF (совместимые китайскокорейскояпонские идеограммы) и от FE30 до FE4F (совместимые китайскокорейскояпонские формы).
Более простое представление типичного китайского шрифта задается следующим диапазоном:
- unicoderange: U+300033FF, U+4E009FFF;
- unicoderange: U+11E00121FF — этот шрифт покрывает область, которую предлагается использовать для пиктограмм ацтеков, охватывая диапазон от 1E00 до 21FF в базе первого уровня;
- unicoderange: U+1A001A1F — этот шрифт покрывает область, которую предлагается использовать для одного из ирландских диалектов (Ogham), охватывая диапазон от 1A00 до 1A1F.
Дескриптор, используемый для указания источника, — ‘src’
Данный дескриптор необходим для обращения к фактическим данным о шрифте независимо от того, был ли он загружен извне или установлен локально.
Схематически представлен упорядоченный по приоритетам список разделенных запятыми имен типов начертаний удаленных и/или локально установленных шрифтов:
‘src’ (Дескриптор) Значение: [ <uri> [format(<string> [, <string>])] | <fontfacename> ] [, <uri> [format(<string> [, <string>])] | <fontfacename> ]
Например:
body { fontfamily: “ITC Franklin Gothic”;
fontweight: 600;
src: local(“FranklinGothicDemi”);
}
или:
@fontface { fontfamily: “Ultrabook 2”;
unicoderange: U+3000FA2D, U+FF00FFEE;
src: url(“http://www.prodtp.ru/web/fonts/ubook2.otf”)
format(“opentype”);
}
При загрузке сетевого шрифта используются внешние ссылки. Ресурс шрифта может составлять подмножество исходного шрифта, когда он содержит, например, только те глифы, которые необходимы для отображения текущей страницы или некого множества страниц.
Внешняя ссылка состоит из URI, за которой может следовать вспомогательная информация, касающаяся нахождения нужного формата шрифта и применяемая браузерами во избежание обработки ссылок, указывающих на недоступные для них форматы шрифтов. Как и любая гипертекстовая ссылка, внешняя ссылка может указывать на множество доступных форматов, относительно которых клиент имеет достаточно четкие представления, не ограничивающиеся простым грамматическим анализом расширений имен файлов в URI.
Вспомогательная информация о формате содержит список разделенных запятыми описаний хорошо известных форматов шрифтов. Пользовательский агент распознает названия поддерживаемых им форматов шрифтов и не осуществляет загрузку тех форматов, которые он не распознает.
В табл. 2 приведен определенный в рамках данной спецификации исходный список описаний форматов, которые могут быть реализованы на различных платформах.
Таблица 2. Форматы шрифтов
Описание |
Формат шрифта |
Примеры типичных |
«truedoc-pfr» |
TrueDoc Portable Font Resource |
*.pfr |
«embedded-opentype» |
Embedded OpenType |
*.eot |
«type-1» |
PostScript Type 1 |
*.pfb, *.pfa |
«truetype» |
TrueType |
*.ttf |
«opentype» |
OpenType, включая TrueType Open |
*.otf, *.ttf |
«truetype-gx» |
TrueType with GX extensions |
|
«speedo» |
Speedo |
*.tdf |
«intellifont» |
Intellifont |
*.sfs, *.tfm |
Подобно всякому URI, используемому в CSS, рассматриваемый путь может быть относительным. В этом случае он доопределяется относительно местоположения таблицы стилей, содержащей правило @fontface.
В качестве полного имени локально установленного шрифта выступает локально определенное значение <fontfacename>. Полным именем шрифта является имя шрифта в том виде, в котором оно задано в операционной системе и в котором, вероятнее всего, будет использоваться в таблицах стилей пользователя или разработчика, имеющего доступ к внутренней сети, а также в таблицах стилей, установленных в браузерах по умолчанию. Такие элементы оформления текста, как насыщенность, курсив и подчеркивание, часто применяются для различения типов начертания шрифтов в пределах одной гарнитуры.
Запись <fontfacename> является полным именем шрифта, которое должно быть заключено в кавычки, так как может содержать любой символ, включая пробелы и знаки пунктуации:
- src: url(“http://path/to”) — полный URI без информации о доступных форматах шрифтов;
- src: local(“Bukvarnaya Bold”) — ссылка на определенный тип начертания локально установленного шрифта;
- src: url(“../path/to”) format(“truedocpfr”) — относительный URI, указывающий на шрифт, доступный в формате TrueDoc;
- src: url(“http://www.path.to”) format(“opentype”, “intellifont”) — полный URI, указывающий в данном случае на шрифт, который может представляться в двух различных форматах — OpenType и Intellifont;
- src: local(“Unibook”), url(“http://www.path.to/ubook”) format(“type1”) — заданы два варианта: первый — локально установленный шрифт, второй — загружаемый шрифт, доступный в формате Type 1.
Обращение к локально установленным шрифтам осуществляется посредством значения <fontfacename>. Несмотря на то что имя начертания шрифта не является абсолютно уникальным, как и абсолютно независимым от платформы и формата шрифта, оно, тем не менее, на данный момент предоставляет наилучший способ идентификации локально установленных данных о шрифтах.
Дескриптор единиц измерения: ‘units-per-em’
Этот дескриптор задает число «единиц измерения», приходящихся на одну кегельную шпацию. Впоследствии эти единицы могут быть использованы другими дескрипторами для определения различных поперечных размеров. Таким образом, дескриптор ‘unitsperem’ нужен только тогда, когда он используется другими дескрипторами. Примеры приведены ниже (См. «Дескрипторы сопоставления»).
Это дескриптор числа координатных линий, разбивающих квадрат размерами в одну кегельную шпацию, выступающий в качестве элемента рабочей сетки, на которой располагаются глифы.
Дескрипторы сопоставления — ‘panose-1’, ‘stemv’, ‘stemh’, ‘slope’, ‘cap-height’, ‘x-height’, ‘ascent’ и ‘descent’
Использование данных дескрипторов в определениях, осуществляемых в рамках CSS2, необязательно, хотя может оказаться полезным, если разработчику понадобится выполнить интеллектуальное сопоставление шрифтов или настройку их размеров.
Схема:
‘panose1’ (Дескриптор) Значение: [<integer>]{10}
Начальное значение: 0 0 0 0 0 0 0 0 0 0 — это дескриптор числа системы классификации Panose1. Он состоит из десяти разделенных пробелом десятичных целых чисел. В качестве значений данного дескриптора не допускается использовать списки, элементы которых разделены запятыми, так как система Panose1 может проинтерпретировать его как диапазон значений, предназначенный для сопоставления. Начальным значением является совокупность нулей, каждый из которых означает возможность появления любой цифры на месте, отведенном для нее в Panose. Если применяется это значение (десять нулей), то с числом Panose будет сопоставим любой шрифт. Для латинских шрифтов настоятельно рекомендуется использовать дескриптор Panose1.
Более подробно система Panose будет рассмотрена позже.
‘stemv’ (Дескриптор) Значение: <number> — это дескриптор ширины вертикальной стойки шрифта. Если его значение не определено, то он не применяется при сопоставлении. В противном случае наряду с ним должен использоваться дескриптор ‘unitsperem’.
‘stemh’ (Дескриптор) Значение: <number> — это дескриптор ширины горизонтального штриха шрифта. Если его значение не определено, то он не применяется при сопоставлении. В противном случае наряду с ним должен использоваться дескриптор ‘unitsperem’.
‘slope’ (Дескриптор) Значение: <number> — это дескриптор угла наклона вертикального штриха шрифта.
‘capheight’ (Дескриптор) Значение: <number> — это дескриптор высоты знаков прописных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен применяться дескриптор ‘unitsperem’.
‘xheight’ (Дескриптор) Значение: <number> — это дескриптор высоты знаков строчных букв шрифта. Если его значение не определено, то он не используется при сопоставлении. В противном случае наряду с ним должен применяться дескриптор ‘unitsperem’. Дескриптор ‘xheight’ рекомендуется применять вместе со свойством ‘fontsizeadjust’, так как при вычислении значения “z” для потенциально подходящих шрифтов требуется знание их размера и высоты их строчных букв.
‘ascent’ (Дескриптор) Значение: <number> — это дескриптор максимальной высоты верхних выносных элементов неакцентированных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен применяться дескриптор ‘unitsperem’.
‘descent’ (Дескриптор) Значение: <number> — это дескриптор максимальной глубины нижних выносных элементов неакцентированных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен применяться дескриптор ‘unitsperem’.
Как это может выглядеть на практике? Пример:
@fontface { fontfamily: “Ultrabook 2”;
unicoderange: U+3000FA2D, U+FF00FFEE;
src: url(“http://www.prodtp.ru/web/fonts/ubook2.otf”)
format(“opentype”);
unitsperem: 2048;
panose: 2 0 5 3 0 0 0 2 0 4;
widths: U+3000FA2D 2048, U+FF00FF5F 2048, U+FF60FFEE 1024;
bbox: , , 2048, 1755;
ascent: 1653; descent: ;
}
Дескрипторы синтеза — ‘widths’, ‘bbox’ и ‘definition-src’
В примере выше вы, наверное, обратили внимание на два новых дескриптора — ‘widths’ и ‘bbox’, которые относятся к дескрипторам синтеза (font synthesis — термин спецификации CSS).
При синтезе шрифта предполагается, что как минимум ширина его глифов будет в точности соответствовать ширине глифов заданного шрифта. Поэтому в процессе синтеза должны быть доступны метрические данные. Эта информация также необходима при динамическом отображении для того, чтобы избежать повторного вывода содержимого после загрузки запрошенного шрифта. Использование нижеописанных дескрипторов в определениях, осуществляемых в рамках CSS2, необязательно, хотя может оказаться полезным, если разработчику нужно осуществить синтез (или динамическое отображение, не требующее повторного вывода). Запрошенный шрифт станет доступным только тогда, когда он заменит шрифт, который подставлялся вместо него. Все представленные здесь дескрипторы могут применяться для улучшения и повышения быстродействия процессов аппроксимации требуемых шрифтов.
Среди этих дескрипторов наиболее важными являются ‘widths’ и ‘bbox’, которые позволяют избежать повторного вывода текста после активизации запрошенного шрифта. Помимо этого для улучшения внешнего вида синтезируемого шрифта могут быть использованы дескрипторы, применяемые при сопоставлении.
Схема:
‘widths’ (Дескриптор) Значения: [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+] — это дескриптор ширины глифов. В качестве его значения выступает список разделенных запятыми параметров <urange>, после каждого из которых следует одно или несколько значений ширины глифов. Если применяется этот дескриптор, то наряду с ним должен использоваться дескриптор ‘unitsperem’.
Если параметр <urange> пропущен, то предполагается, что в качестве его значения используется диапазон U+07FFFFFFF, который охватывает все символы и их глифы. Если задано недостаточное количество значений ширины глифов, то последнее значение в этом списке дублируется, чтобы охватить всё их множество. Если задано слишком много значений, то лишние игнорируются.
Данный дескриптор не может прменяться для описания лигатуры или нескольких глифов, соответствующих одному и тому же символу.
Схема:
‘bbox’ (Дескриптор) Значение: <number>, <number>, <number>, <number> — это дескриптор максимального ограничивающего блока шрифта. Принимаемые им значения состоят из четырех разделенных запятыми чисел, которые в порядке своего следования определяют нижнюю левую координату x, нижнюю левую координату y, верхнюю правую координату x и верхнюю правую координату y ограничивающего блока всего шрифта.
Схема:
‘definitionsrc’ (Дескриптор) Значение: <uri> — дескрипторы шрифта могут находиться либо в рамках определения шрифтов, осуществляемого в таблице стилей, либо в отдельном ресурсе, содержащем описания шрифтов и расположенном по адресу, указанному в URI. Используемый в настоящее время подход помогает сократить сетевой трафик, если несколько таблиц стилей обращаются к одним и тем же шрифтам.
Выглядеть это может так:
definitionsrc: url(«http://www.prodtp.ru/fonts.css»);
Таблица 3. Места, где хранится информация для дескрипторов
Дескриптор |
Type 1 |
TrueType и OpenType |
TrueType GX |
‘ascent’ |
Значение ‘Ascender’ в файле AFM/PFM |
Значение ‘Ascender’ в таблице ‘hhea’ или (предпочтительно) ‘sTypoAscender’ в таблице ‘OS/2’ |
Значение ‘horizontalBefore’ в таблице ‘fmtx |
baseline’ |
Таблица bsln |
||
‘bbox’ |
FontBBox, заголовок или специальный словарь шрифта (AFM) |
Вхождения таблицы ‘head’ — ‘xMin’, ‘xMax’, ‘yMin’ и ‘yMax’ |
|
‘cap-height’ |
CapHeight в файле AFM/PFM |
||
‘descent’ |
‘Descender’ в файле AFM/PFM |
||
‘mathline’ |
Таблица sln |
||
‘font-family’ |
FamilyName, fontinfo-словарь |
Таблица name |
|
‘stemh’ |
StdHW, приватный словарь файла AFM/PFM |
||
‘stemv’ |
/StdVW, приватный словарь |
Таблица cvt |
|
‘topline’ |
Таблица bsln |
||
‘unicode-range’ |
cmap file |
Таблица OS/2 |
|
‘units-per-em’ |
FontMatrix, словарь шрифтов |
unitsPerEm, таблица head |
|
‘widths’ |
Таблица hmtx |
Дескрипторы, используемые для выравнивания, — ‘baseline’, ‘centerline’, ‘mathline’ и ‘topline’
Данные дескрипторы не являются обязательными и применяются для выравнивания различных шрифтов друг относительно друга.
Схема:
‘baseline’ (Дескиптор) Значение: <number>
Начальное значение: 0 — это дескриптор нижней (базовой) линии шрифта. Если ему присваивается ненулевое значение, отличное от используемого по умолчанию, то наряду с ним должен применяться дескриптор ‘unitsperem’.
‘centerline’ (Дескриптор) Значение: <number> — это дескриптор центральной линии шрифта. Если его значение не определено, то в качестве него браузер может использовать различные эвристики, такие, например, как срединная точка между уровнями верхних и нижних выносных знаков. Если этот дескриптор применяется, то наряду с ним должен использоваться дескриптор ‘unitsperem’.
‘mathline’ (Дескриптор) Значение: <number> — это дескриптор математической средней линии шрифта. Если его значение не определено, то в качестве него пользовательский агент может использовать уровень центральной базовой линии. Если этот дескриптор применяется, то наряду с ним должен использоваться дескриптор ‘unitsperem’.
‘topline’ (Дескриптор) Значение: <number> — это дескриптор верхней линии шрифта. Если его значение не определено, то в качестве него пользовательский агент может использовать приблизительное значение, такое, например, как высота уровня верхних выносных знаков. Если данный дескриптор применяется, то наряду с ним должен использоваться дескриптор ‘unitsperem’.
Места, где хранится информация для дескрипторов, указаны в табл. 3.