Обратите внимание, что
* * *
@font-face
@font-feature-values
Шрифт представляет собой ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая представляет собой коды символов и фигур (называемых глифами) представляющие эти символы. Шрифты, имеющие общий стиль дизайна, как правило, группируются в семейства шрифтов, классифицированные по набору стандартных свойств шрифта. В семействе, форма отображения определённого символа может изменяться по толщине обводки, наклону или относительно ширины остальных символов. Индивидуальный вариант шрифта описывается уникальным сочетанием этих свойств. Для определённого диапазона текста, CSS свойства шрифта используются, для выбора семейства шрифта и его конкретного варианта, который будет использован при выводе этого текста. В качестве простого примера, укажем полужирный Helvetica как выбранный нами шрифт:
body { font-family: Helvetica; font-weight: bold; }
Ресурсы шрифта могут быть установлены локально на компьютере, на котором используется агент пользователя или могут быть загружены извне. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта. Для загружаемых ресурсов шрифта (иногда называют веб-шрифтами), описательная информация находится по ссылке указаннывающей расположение ресурса шрифта.
Семейство шрифтов, как правило, содержит не более одного варианта для каждой возможной настройки свойств шрифта. Механизм выбора CSS шрифта описывает, как должен соответствовать данный CSS набор свойств шрифта для одного варианта шрифта.
Этот раздел не является нормативным.
Типографические традиции по всему миру различны, и поэтому нет уникального способа классифицировать все шрифты в разных языках и культурах. Даже для общих букв латинского алфавита, возможны различные вариации:
Различия в отображении букв является одним из способов отличить шрифты. Для латинских шрифтов, росчерки на концах основных символов штрихов или засечки, помогают выделять шрифт. Аналогичные сравнения существуют и в нелатинских шрифтах между шрифтами с сужающимися штрихами и теми, которые, в основном, используют равномерные штрихи:
Шрифты содержат буквы и данные необходимые для преобразования символов в эти буквы. Часто это может быть простое отображение один-к-одному, но более сложные отображения также возможны. Использование сочетаний диакритических знаков создаёт множество вариаций базового написания:
Последовательность символов может быть представлена в виде одного символа, известного как лигатура:
Визуальные преобразования, основанные на текстовом контексте, являются частым стилистическим параметром в европейских языках. Они необходимы для правильного отображения символов таких языков, как арабский, лам и алеф, перечисленных ниже, которые должны быть объединены, в случае если они расположены в определённой последовательности:
Относительная сложность формирования таких преобразований требует дополнительных данных в рамках шрифта.
Наборы вариантов шрифтов с разными стилевыми вариациями, часто группируются в семейство шрифтов. В простейшем случае стандартный вариант дополняется полужирным и курсивным вариантом, но так же возможна гораздо более обширная группировка. Вариации по толщине написания штрихов, жирности, общих пропорций написания и ширины являются наиболее распространёнными. В приведённом ниже примере, каждая буква использует различный вариант шрифта из Univers семейства шрифтов. Ширина увеличивается сверху вниз, а жирность увеличивается слева направо:
Создание шрифтов, которые поддерживают несколько сценариев, является сложной задачей; дизайнеры должны понимать культурные традиции, связанные с использованием типов шрифтов в различных письменностях и подумать над буквами, которые имеют общую тему. Многие языки часто имеют общую письменность, но каждый из этих языков может иметь существенные стилистические различия. Например, арабская вязь, когда она используется для персидского и урду, проявляет значительные и систематические различия в форме букв, так же как и кириллица при использовании таких языков, как сербский и русский.
Таблица символов шрифта определяет соответствие символов и глифов для шрифта. Если документ содержит символы, не поддерживаемые таблицей символов шрифта, который включён в список семейства шрифтов, то агент пользователя может использовать процедуру система подмены шрифтов, чтобы найти подходящий шрифт. Если соответствующий шрифт отсутствует, то можно найти некоторые формы символа отсутствующий глиф, который будет отображён агентом пользователя вместо отсутствующих символов. Система подмены может быть использована, если указанный список семейств шрифтов включает в себя шрифт, не поддерживающий тот или иной символ.
Хотя таблица символов шрифта отображает данный символ от глифа до символа, современные технологии, такие как OpenType и AAT (Apple Advanced Typography) обеспечивают способы отображения символов различных глифов основанных на настройках функций. Шрифты с подобными форматами позволяют сделать так, чтобы эти возможности были встроены в сам шрифт и управлялись приложением. Общие типографские функции, которые могут быть заданы таким образом, включают лигатуры, каллиграфические элементы, контекстные альтернативы, пропорциональные и табличные цифры, автоматические части, при этом перечислены лишь некоторые. Визуальный обзор возможностей OpenType, смотрите в [OPENTYPE-FONT-GUIDE].
Определённый вариант шрифта, используемый для отображения символа, определяется семейством шрифтов и другими свойствами шрифта, которые применяются к данному элементу. Такая структура позволяет изменять настройки шрифта независимо друг от друга.
Название: | font-family |
Значение: | [ <название-семейства> | <общее-семейство> ] # |
Значение по умолчанию: | зависит от агента пользователя |
Применяется: | ко всем элементам |
Наследование: | да |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Данное свойство задаёт приоритетный список имён семейств шрифтов или общих семейств. Семейство шрифтов определяет набор вариантов, которые различаются по жирности, ширине или наклону. CSS использует сочетание имени семейства с другими атрибутами стиля для выбора отдельных вариантов. Использование такого механизма выбора, а, не выбор варианта с помощью имени стиля, как это часто делается в дизайнерских приложениях, позволяется при наличии некоторой степени закономерности на текстовом дисплее, когда используется запасной вариант.
Дизайнеры должны обратить внимание, что CSS определение атрибутов шрифта, используемых для выбора, явно не предназначены для определения систематики шрифта. Тип дизайнерской идеи семейства зачастую может распространяться на множество вариантов, которые изменяются относительно других вариаций, чем просто относительно стандартной вариации жирности, ширины и наклона. Семейство может включать в себя как набор serif вариантов, так и набор sans-serif вариантов или изменяться относительно вариантов являющихся уникальными для данного семейства. CSS механизм выбора шрифта лишь предоставляет возможность определить “ближайшую” замену в случае, когда необходима замена.
В отличие от других свойств CSS, элементы данного значения, разделяют список элементов запятыми для того чтобы показать, что данные элементы являются альтернативными. Агент пользователя перебирает список имён семейств до тех пор, пока не подберёт соответствующий доступный шрифт, содержащий глиф для отображения символа. Это позволяет использовать доступные похожие шрифты на разных платформах, которые так же могут различаться по диапазону символов поддерживаемых отдельными шрифтами.
Имя семейства шрифтов указывает только название определённого набора вариантов шрифтов, но не указывает его индивидуальные варианты. Например, с учётом нижеприведённых шрифтов, Futura будет этому соответствовать, а вот Futura Medium уже не будет соответствовать:
Рассмотрим пример, приведённый ниже:
body { font-family: Helvetica, Verdana, sans-serif; }
Если Helvetica доступен, то он будет использован в процессе отображения. Если Helvetica и Verdana отсутствуют, то будут использоваться sans serif шрифты определённые агентом пользователя.
Существует два типа имён семейств шрифтов:
serif
’, ‘sans-serif
’, ‘cursive
’, ‘fantasy
’, и ‘monospace
’. Эти ключевые слова могут быть использованы в качестве общего резервного механизма в случае, когда все указанные автором шрифты не доступны. Данные ключевые слова не должны быть заключены в кавычки. Авторам рекомендуется указывать общее семейство шрифтов в качестве последней альтернативы для повышения надёжности исполнения дизайнерского замысла.Имена семейств шрифтов, кроме общих семейств должны быть указаны в кавычках как строки или без кавычек как последовательность из одного или более идентификаторов. Это означает, что большинство знаков препинания и цифр в начале каждого элемента должны быть экранированы в нецитируемые имена семейств шрифтов.
Чтобы проиллюстрировать это, приведём следующие объявления, которые будут являться недействительными:
font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;
Если последовательность идентификаторов задаётся в виде имён семейств шрифтов, то значение этих имён преобразуется в строку путём присоединения всех идентификаторов в определённой последовательности с помощью одиночных пробелов.
Чтобы избежать ошибок в объявлениях, имена семейств шрифтов, содержащие пробелы, цифры или знаки препинания, кроме дефиса рекомендуется заключать в кавычки:
body { font-family: "New Century Schoolbook", serif } <BODY STYLE="font-family: '21st Century', fantasy">
Имена семейств шрифтов, которые имеют такое же название, как и значение ключевого слова (‘inherit
’, ‘serif
’, ‘sans-serif
’, ‘monospace
’, ‘fantasy
’, и ‘cursive
’) должны быть заключены в кавычки, чтобы избежать путаницы между ключевыми словами и такими же именами. Ключевые слова ‘initial
’ и ‘default
’ зарезервированы для будущего использования и в случае присутствия в названиях шрифтов так же должны подчиняться этому правилу. Агенты пользователей не должны рассматривать эти ключевые слова, как соответствующий тип <название-семейства>.
Точный способ группировки набора шрифтов в семейство шрифтов варьируется в зависимости от API платформы управления шрифтами. Windows GDI API позволяет использовать только четыре варианта, которые будут сгруппированы в шрифт, в то время как DirectWrite API и API в OSX и других платформах поддерживают семейства шрифтов с различной степенью жирности, ширины и наклона (смотрите Приложение А для получения более подробной информации).
Некоторые форматы шрифтов позволяют шрифтам иметь несколько локализованных названий семейства. Агенты пользователей должны распознавать и правильно подбирать все эти имена, не зависимо от локализации базовой платформы, используемой системы API или кодировки документа:
Детали подбора локализованного имени семейства шрифтов и соответствующих вопросов чувствительности к регистру, описаны ниже в разделе подбора шрифта.
Пять общих семейств шрифтов существуют во всех CSS реализациях (при этом не обязательно, что они будут отображаться для пяти различных фактических шрифтов). Агенты пользователей должны обеспечить разумный выбор по умолчанию для общих семейств шрифтов, которые выражают характеристики каждого семейства, а также возможностей в рамках, разрешённых применяемой технологии. Агентам пользователей предлагается возможность разрешить пользователям самим выбирать альтернативы для общих шрифтов.
Serif шрифты представляют собой официальный стиль текста письменности. Это часто означает, что он может не ограничиваться глифами с завершающими штрихами, расклешёнными или сужающимися концами или имеющими реальные окончания в виде засечек (в том числе c частицами засечек). Serif шифты, как правило, имеют определённый интервал. Они часто проявляют больше различий между толстыми и тонкими штрихами, чем шрифты общего семейства ‘sans-serif
’. В CSS термин ‘serif
’ используется применительно к шрифтам любой письменности, хотя некоторые другие названия могут быть более знакомы для определённых видов письма, таких как Mincho (Японский), Sung, Song или Kai (Китайский), Batang (Корейский). Для арабских языков, Naskh стиль будет более соответствовать ‘serif
’ в виду его типографской роли, а не его фактического дизайнерского стиля. Любой шрифт, описанный таким образом, может быть использован для представления общего семейства ‘serif
’.
Глифы в sans-serif шрифтах, как этот термин используется в CSS, как правило, имеют низкую контрастность (вертикальные и горизонтальные перекладины имеют приблизительно одинаковую толщину) и имеют простые штриховые окончания -- без каких-либо расширений, крестовых штрихов или других орнаментов. Sans-serif шрифты, как правило, имеют определённый интервал. Они часто обладают небольшим количеством различий между толстыми и тонкими штрихами, по сравнению со шрифтами семейства ‘serif
’. В CSS термин ‘sans-serif
’ используется применительно к шрифтам любой письменности, хотя некоторые другие имена могут быть более знакомы для определённых видов письма, таких как Gothic (Японский), Hei (Китайский), Gulim (Корейский). Любой шрифт, описанный таким образом, может быть использован для представления общего семейства ‘sans-serif
’.
Глифы в cursive шрифтах, как правило, используют более неформальный стиль письменности и результат больше похож на надпись сделанную ручкой или кистью, чем на напечатанную надпись. В CSS термин ‘cursive
’ используется применительно к шрифтам любой письменности, хотя некоторые другие названия, такие как Chancery, Brush, Swing и Script также используются в названиях таких шрифтов.
Fantasy шрифты это в первую очередь декоративные или выразительные шрифты, которые содержат выразительные или экспрессивные символы. Они не включают в себя Pi или Picture шрифты, которые не имеют реальных символов.
Единственным критерием monospace шрифтов является то, что все символы имеют одинаковую фиксированную ширину. Этот шрифт часто используется для отображения образцов компьютерного кода.
Название: | font-weight |
Значение: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | числовое значение степени жирности (смотрим описание) |
Анимируется: | как font weight |
Свойство ‘font-weight
’ указывает степень жирности глифов шрифта, степень их черноты или толщины линий.
Значения имеют следующий смысл:
400
’.700
’.Форматы шрифтов, которые используют свою шкалу значений, отличающуюся от девятизначной шкалы CSS, должны иметь ввиду что значение 400 примерно должно соответствовать варианту, обозначенному как Regular, Book, Roman и значение 700 примерно должно соответствовать варианту, обозначенному как Bold. Или степень жирности может не отображаться в именах стилей, которые примерно соответствуют масштабу приведённому выше. Шкала является относительной, поэтому варианты имеющие значения, которые обозначают высокую степень жирности, никогда не должны выглядеть менее жирными. Если имена стилей используются для обозначения степени жирности, то следует позаботиться, чтобы указать различные вариации в именах стилей различных языков.
Довольно часто бывает так, что присутствует только несколько степеней жирности, доступных для конкретного семейства шрифтов. Если в качестве степени жирности указывается отсутствующий вариант, то используется ближайший вариант степени жирности. В общем, жирный шрифт отображается с помощью варианта с высоким числовым значением, а тонкий шрифт отображается с помощью варианта с небольшим числовым значением (смотрим ниже раздел подбора шрифта для получения более подробной информации). Приведённые здесь примеры показывают варианты жирности, которые используются для различных степеней жирности, при этом варианты, окрашенные в серый цвет, указывают на то, что данный вариант не существует, и поэтому применяются варианты наиболее близкие к отсутствующему варианту:
Хоть типографы и не любят подобную практику, но жирные варианты часто синтезируются агентами пользователей для устранения отсутствия соответствующих вариантов. В целях согласования стиля, эти варианты должны рассматриваться так, как если бы они в действительности существовали в качестве одного из вариантов семейства. Авторы могут избежать этого с помощью ‘font-synthesis
’ свойства.
Значения ‘bolder
’ и ‘lighter
’ указывают степень жирности, вычисляемую относительно степени жирности родительского элемента. Вычисляемая степень жирности рассчитывается на основе значения свойства ‘‘font-weight
’’ наследуемого от родительского элемента с помощью приведённой ниже таблицы.
Наследуемое значение | bolder | lighter |
---|---|---|
100 | 400 | 100 |
200 | 400 | 100 |
300 | 400 | 100 |
400 | 700 | 100 |
500 | 700 | 100 |
600 | 900 | 400 |
700 | 900 | 400 |
800 | 900 | 700 |
900 | 900 | 700 |
В приведённой выше таблице указана схема соответствующего выбора следующей степени жирности относительно bolder или lighter значения, учитывая, что семейство шрифтов содержит нормальные и жирные варианты наряду с тонким и более жирными вариантами. Авторам, желающим осуществлять более тщательный контроль над точными значениями жирности, используемыми для определённого элемента, должны использовать числовые значения, а не относительные значения жирности.
Название: | font-stretch |
Значение: | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | как font stretch |
Свойство ‘font-stretch
’ выбирает нормальный, уплотнённый или расширенный вариант из семейства шрифтов. Абсолютные значения ключевых слов имеют следующий порядок, от самого сжатого состояния символов до самого широкого:
Если для заданной ширины нет соответствующего варианта, то normal или condensed значения отображаются в качестве уплотнённого варианта, в противном случае отображается широкий вариант. И наоборот, expanded значения отображают широкий вариант, в противном случае отображается уплотнённый вариант. На рисунке ниже показано, как девять вариантов свойства font-stretch влияют на выбор шрифта из семейства шрифтов, содержащего различные варианты ширины, при этом символы, указанные серым цветом, сообщают, что данный вариант ширины символов отсутствует и вместо него выбирается другой вариант:
Анимация font stretch: Font stretch интерполируется отдельными шагами. Интерполяция происходит так, как если бы упорядоченные значения равномерно распределялись как реальные цифры. В результате интерполяции числа округляются до ближайшего значения, при этом значение расположенное посередине межу двумя другими значениями округляется в сторону последнего значения в приведённом выше списке.
Название: | font-style |
Значение: | normal | italic | oblique |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Свойство ‘font-style
’ позволяет выбирать курсивный или наклонный вариант. Курсивный, как правило, представляет собой скорописную версию шрифта, в то время как наклонный, как правило, представляет собой немного наклонённую вариацию нормальной версии шрифта. Наклонная версия может быть смоделирована с помощью искусственного наклонения глифов нормального варианта. Сравните отображение искусственно наклонённого символа ‘a
’ Palatino и сивола ‘N
’ Baskerville, отображённых серым цветом с символами фактического курсивного начертания:
Значения имеют следующий смысл:
Авторы должны также иметь в виду, что подходы, связанные с синтезированием могут быть не пригодны для таких письменностей, как кириллица, где курсивные формы сильно отличаются друг от друга. Поэтому всегда лучше использовать фактический курсивный шрифт, а не полагаться на синтезированные версии.
Во многих письменностях отсутствуют традиции смешивания скорописи c текстом, имеющим нормальную версию шрифта. В китайских, японских и корейских шрифтах почти всегда отсутствуют курсивные или наклонные варианты. Шрифты, которые поддерживают смесь письменностей, будут иногда игнорировать конкретные письменности, такие как арабский набор глифов, поддерживающий курсивную версию. Агенты пользователей должны быть осторожны при проверке таблицы символов проверяя при этом различные версии, несмотря на реализуемую поддержку системы подмены шрифтов.
Название: | font-size |
Значение: | <абсолютный-размер> | <относительный-размер> | <длина> | <проценты> |
Значение по умолчанию: | medium |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | относительно размера шрифта родительского элемента |
Медиа: | визуальный |
Вычисляемое значение: | абсолютная длина |
Анимируется: | как длина |
Это свойство указывает желаемую высоту глифов шрифта. Для масштабируемых шрифтов, размером шрифта является масштабный коэффициент применяемый к EM единице шрифта. (Обратите внимание, что некоторые глифы могут выходить за пределы своих EM площадей.) Для немасштабируемых шрифтов, размер шрифта конвертируется в абсолютные единицы и сравнивается с заявленным значением font-size, используя одну и ту же абсолютную координату пространства для обоих соответствующих значений. Значения имеют следующий смысл:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
font-size
’ родительского элемента. Возможные значения:
[ larger | smaller ]
Например, если родительский элемент имеет размер шрифта ‘medium
’, то значение ‘larger
’ сделает размер шрифта текущего элемента ‘large
’. Если родительский элемент имеет размер не близкий к табличной записи, то агент пользователя свободен в интерполяции значений таблицы или округлении до ближайшего значения. Агенту пользователя может потребоваться экстраполировать значения таблицы, если числовое значение выходит за пределы ключевых слов.
em
’ приводит к более надёжной и каскадной таблице стилей.В следующей таблице приводятся рекомендации агенту пользователя по коэффициентам масштабирования абсолютного-размера и их сопоставления с HTML заголовками и абсолютными размерами шрифта. Значение ‘medium
’ используется в качестве среднего значения. Агент пользователя может настраивать эти значения для разных шрифтов или различных типов устройств.
CSS значения абсолютного-размера | xx-small | x-small | small | medium | large | x-large | xx-large | |
---|---|---|---|---|---|---|---|---|
коэффициент масштабирования | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
HTML заголовки | h6 | h5 | h4 | h3 | h2 | h1 | ||
HTML размеры шрифтов | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Примечание 1. Чтобы сохранить читаемость, агенту пользователя при применении этих рекомендаций следует, избегать создания такого размера-шрифта, который был бы меньше 9 пикселей на одну EM единицу компьютерного дисплея.
Примечание 2. В CSS1 рекомендованный коэффициент масштабирования между соседними индексами составлял 1.5, но согласно пользовательскому опыту такой коэффициент масштабирования оказался слишком большим. В CSS2 рекомендованный коэффициент масштабирования для экрана компьютера между соседними индексами составляет 1.2, но такой коэффициент до сих пор создавал проблемы для небольших размеров. Новый коэффициент масштабирования колеблется в пределах каждого индекса, чтобы обеспечить лучшую читаемость.
Фактическое значение этого свойства может отличаться от вычисленного значения из-за числового значения в ‘font-size-adjust
’ и отсутствия некоторых размеров шрифта.
Дочерние элементы наследуют вычисляемое значение ‘font-size
’ (в противном случае, эффект ‘font-size-adjust
’, будет усилен).
p { font-size: 12pt; } blockquote { font-size: larger } em { font-size: 150% } em { font-size: 1.5em }
Название: | font-size-adjust |
Значение: | none | <число> |
Значение по умолчанию: | none |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | как число |
Для любого определённого размера шрифта, истинный размер и читаемость текста варьируется в зависимости от шрифтов. Для таких письменностей как латынь или кириллица, различие между прописными и строчными буквами состоит в разной высоте строчных букв по сравнению с их прописными аналогами и это является определяющим фактором читаемости. Этот фактор обычно упоминается как значение перспективы. Если данное значение точно определено, то оно равно x-высоте шрифта, делённого на размер шрифта.
В случаях, использования запасного варианта, запасные шрифты могут не иметь такого же вида, который имеют предпочтительные шрифты и, таким образом, они могут оказаться менее читаемыми. Свойство ‘font-size-adjust
’ это способ сохранить читаемость текста в случае использования запасного варианта. Этого можно достичь путём регулировки размера-шрифта так, что бы х-высота оставалась неизменной, независимо от используемого шрифта.
Стиль, определённый ниже, устанавливает Verdana в качестве предпочтительного семейства шрифтов, но если Verdana отсутствует, то будет использован Futura или Times.
p { font-family: Verdana, Futura, Times; } <p>Lorem ipsum dolor sit amet, ...</p>
Verdana имеет относительно высокое значение перспективы, так строчные буквы являются относительно высокими по сравнению с прописными буквами, поэтому при небольших размерах, текст является вполне читаемым. Times имеет более низкое значение перспективы и поэтому, если используется запасной вариант, то текст, при небольших размерах будет менее разборчивым, чем Verdana.
Сравнение того как выглядит текст при каждом из этих шрифтов показано ниже, где в каждом из столбцов, отображён текст с использованием Verdana, Futura и Times. В каждой строке каждого столбца используется одно и то же значение размера-шрифта и при этом проведена красная линия для, чтобы показать различия в х-высоте. В пределах каждой строки верхней части используется одно и тоже значение размера-шрифта. То же самое верно и для нижней части, но в этой части свойство ‘font-size-adjust
’ устанавливается таким образом, что бы фактический размер шрифта регулировался так, чтобы сохранить x-высоту каждой строки. Обратите внимание, как маленький текст в нижнем блоке остаётся достаточно разборчивыми.
Это свойство позволяет авторам указать значение перспективы для элемента, который будет эффективно сохранять х-высоту первого выбранного шрифта, даже в случае замены желаемого шрифта. Значения имеют следующий смысл:
c = ( a / a' ) s
где:
s = значение размера-шрифта a = значение перспективы как указано в свойстве 'font-size-adjust' a' = значение перспективы фактического шрифта c = скорректированный размер шрифта, предназначенный для использования
Это значение применяется к любому выбранному шрифту, но в обычном режиме использование должно быть основано на значении перспективы первого шрифта в списке семейств-шрифтов. Если оно указано точно, то (a/a') выражение в вышеприведённой формуле, для первого шрифта фактически равно 1 и при этом регулировки как таковой не происходит. Если значение указано некорректно, то текст, отображаемый с помощью первого шрифта из списка семейств, так же как и в старых агентах пользователей не поддерживающих ‘font-size-adjust
’ будет отображаться по-разному.
Значение ‘font-size-adjust
’ влияет на используемое значение свойства ‘font-size
’, но не влияет на вычисляемое значение. Это влияет на размер относительных единиц, которые основаны на метрике первого доступного шрифта, таких как ex
и ch
, но не влияет на размер em
единиц. Поскольку числовые значения ‘line-height
’ относятся к вычисляемому размеру ‘font-size
’, то ‘font-size-adjust
’ не влияет на используемое значение ‘line-height
’.
В CSS, авторы часто используют ‘line-height
’ как подобное ‘font-size
’. Поскольку свойство ‘font-size-adjust
’ влияет на используемое значение ‘font-size
’, авторы должны позаботиться о настройке высоты строки при использовании ‘font-size-adjust
’. Если высота строк будет установлена слишком плотно по отношению друг к другу, то в данной ситуации это может привести к перекрыванию текстовых строк.
Авторы могут вычислить значение перспективы для данного шрифта путём сравнения интервалов с одинаковым содержанием, но разными ‘font-size-adjust
’ свойствами. Если же используется размер-шрифта, то интервалы будут соответствовать только тогда, когда значение ‘font-size-adjust
’ является точным для данного шрифта.
Два интервала с рамками используются для определения значения перспективы шрифта. ‘font-size
’ является одинаковым для обоих элементов span, но свойство ‘font-size-adjust
’ задаётся только для правого элемента span. Начиная со значения 0.5, значение перспективы можно отрегулировать вплоть до границ вокруг двух выстроенных в линию букв.
p { font-family: Futura; font-size: 500px; } span { border: solid 1px red; } .adjust { font-size-adjust: 0.5; } <p><span>b</span><span class="adjust">b</span></p>
Прямоугольнок справа немного больше чем слева, поэтому значение перспективы этого шрифта меньше 0.5. Производите настройку значения до тех пор, пока объекты не выровняться.
Название: | font |
Значение: | [ [ <‘font-style ’> || <font-variant-css21> || <‘font-weight ’> || <‘font-stretch ’ ]? <‘font-size ’> [ / <‘line-height ’> ]? <‘font-family ’> ] | caption | icon | menu | message-box | small-caption | status-bar |
Значение по умолчанию: | смотрим отдельные свойства |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | смотрим отдельные свойства |
Медиа: | визуальные |
Вычисляемое значение: | смотрим отдельные свойства |
Анимируется: | смотрим отдельные свойства |
Свойство 'font
' является сокращённым свойством для одновременного указания значений ‘font-style
’, ‘font-variant
’, ‘font-weight
’, ‘font-stretch
’, font-size
, ‘line-height
’ и ‘font-family
’ свойств в одном месте таблицы стилей. Значения свойства ‘font-variant
’ могут быть также включены в общую запись, но только в случае поддержки CSS 2.1, но при этом ни одно из значений ‘font-variant
’, добавленное в данной спецификации, не может быть использовано в ‘font
’ записи:
<font-variant-css21> = [normal | small-caps]
Синтаксис этого свойства основан на сокращении традиционной типографской записи для того, чтобы можно было одновременно задать несколько свойств, связанных со шрифтами.
Всем вложенным свойствам ‘font
’, сначала присваиваются начальные значения, в том числе и перечисленным выше, плюс ‘font-size-adjust
’, ‘font-kerning
’, а также подсвойствам ‘font-variant
’ и ‘font-language-override
’. Затем этим свойствам, которым в ‘font
’ записи даны определённые значения присваиваются эти же значения. Для определения допустимых и начальных значений смотрим ранее определённые свойства. Из соображений обратной совместимости, при использовании сокращённого свойства ‘font
’, для ‘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 Palatino, serif } p { font: normal small-caps 120%/120% fantasy } p { font: condensed oblique 12pt "Helvetica Neue", serif; }
Во втором объявлении, размер процентного значения шрифта (‘80%
’) вычисляется относительно значения ‘font-size
’ родительского элемента. В третьем объявлении, высота строки выраженная в процентах (‘110%
’) относится к размеру шрифта самого элемента.
В первых трёх объявлениях, не указаны ‘font-variant
’ и ‘font-weight
’ в явном виде, поэтому этим свойствам присваиваются их начальные значения (‘normal
’). Обратите внимание, что название семейства шрифтов «new century schoolbook», содержащее пробелы, заключено в кавычки. Четвёртое объявление устанавливает ‘font-weight
’ свойству значение ‘bold
’, свойству ‘font-style
’ значение ‘italic
’ и свойству ‘font-variant
’ неявно устанавливается значение ‘normal
’.
Пятое объявление задаёт значения свойствам ‘font-variant
’ (‘small-caps
’), ‘font-size
’ (120% относительно размера шрифта родительского элемента), ‘line-height
’ (на 120% больше размера шрифта) и ‘font-family
’ (‘fantasy
’). Отсюда следует, что ключевое слово ‘normal
’ относится к двум оставшимся свойствам: ‘font-style
’ и ‘font-weight
’.
Шестое объявление задаёт значения свойствам ‘font-style
’, ‘font-stretch
’, ‘font-size
’ и ‘font-family
’, а остальным свойствам шрифта присваиваются их начальные значения.
Поскольку свойство ‘font-stretch
’ не было определено в CSS 2.1, то при использовании значения ‘font-stretch
’ в пределах объявления ‘font
’, авторы должны включать дополнительные версии, совместимые с более старыми версиями агентов пользователей:
p { font: 80% sans-serif; /* для старых версий агентов пользователей */ font: condensed 80% sans-serif; }
Следующие значения относятся к системным шрифтам:
Системные шрифты могут устанавливаться только полностью; то есть, должно быть указано семейство шрифтов, размер, жирность, стиль, и так далее, одновременно устанавливаются все значения. После, по желанию эти значения могут быть изменены по отдельности. Если шрифт с указанными характеристиками отсутствует на данном устройстве, то агент пользователя должен либо грамотно его заменить (например, уменьшенная версия ‘caption
’ шрифта, может быть использована для замены ‘small-caption
’ шрифта), либо вместо него агент пользователя должен использовать свой шрифт по умолчанию. Так же как и для обычных шрифтов, если для системного шрифта, любое из индивидуальных свойств не является частью доступных пользовательских настроек операционной системы, то этим свойствам должны быть заданы начальные значения.
Вот почему это свойство «почти» сокращённое свойство: системные шрифты могут быть указаны только с помощью этого свойства, а не с помощью самого ‘font-family
’, так что ‘font
’ позволяет авторам сделать больше настроек, чем все его подсвойства. Однако отдельные свойства, такие, как ‘font-weight
’ по-прежнему устанавливают значения, взятые из системных шрифтов, которые также могут не зависить друг от друга.
Обратите внимание, что ключевые слова, используемые для системных шрифтов, перечисленных выше, рассматриваются только как ключевые слова, но если они встречаются в исходной позиции или в других позициях, то такая строка уже рассматривается как часть имени семейства шрифтов:
font: menu; /* использует настройки шрифта для системного меню */ font: large menu; /* использует семейство шрифтов с именем "menu" */
button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } button p { font: menu } button p em { font-weight: bolder }
Если в определённой системе шрифт используется для выпадающего меню и случается, например, так, что этот шрифт является 9-ти пиксельным Charcoal, с жирностью 600, то элементы P, которые являются потомками BUTTON будут отображаться согластно указанному стилю:
button p { font: 600 9pt Charcoal }
Поскольку сокращение ‘font
’ сбрасывает значения входящих в него свойств до первоначальных, при этом явно не присваивая им значения, то соответственно это сокращённое свойство имеет такой же эффект, как и представленная ниже запись:
button p { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal }
Название: | font-synthesis |
Значение: | none | [ weight || style ] |
Значение по умолчанию: | weight style |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Это свойство разрешает или запрещает агентам пользователей синтезировать жирную или наклонную версию шрифта, в случаях, когда в семействе шрифтов отсутствует жирная или курсивная версия. Если ‘weight
’ не указан, то агенты пользователей не должны синтезировать жирную версию, а если не указан ‘style
’, то агенты пользователей соответственно не должны синтезировать курсивную версию. Значение ‘none
’ запрещает синтезиpовать любые версии.
Стиль, объявленный ниже, отключает использование синтетически наклонённых версий для арабской письменности:
*:lang(ar) { font-synthesis: none; }
@font-face
Правило @font-face
позволяет указывать расположение шрифтов, которые автоматически скачиваются и добавляются, когда это необходимо. Это позволяет авторам выбрать шрифт, который точно соответствует целям разработки данной страницы, а не ограничиваться выбором шрифтов из набора шрифтов, доступных на данной платформе. Набор дескрипторов шрифта определяет местоположение ресурса шрифта, либо локальное, либо внешнее, наряду со стилем символов отдельного варианта. Несколько правил @font-face
могут быть использованы для создания шрифтов с различными вариантами шрифта. Используя CSS шрифты соответствующие правилам, браузеры могут выборочно скачивать только те варианты, которые необходимы для данной части текста.
Правило @font-face
состоит из ключевого слова @font-face
, за которым следует блок объявлений дескрипторов. С точки зрения грамматики, эта спецификация определяет следующую расстановку:
font_face_rule : FONT_FACE_SYM S* '{' S* descriptor_declaration? [ ';' S* descriptor_declaration? ]* '}' S* ; descriptor_declaration : property ':' S* expr ;
Вводятся следующие новые определения:
- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])? F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?
Вводится следующий новый маркер:
@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return FONT_FACE_SYM;}
Каждое правило @font-face
явно или неявно определяет значение для каждого дескриптора шрифта. Не учитывая явных значений в правиле, принимаются начальные значения, перечисленные для каждого дескриптора в данной спецификации. Дескрипторы используются исключительно в контексте правила @font-face
, в котором они определены, при этом они не могут быть применены к языковым элементам документа. Нет чёткого определения того, какие элементы дескрипторов применяются или какие значения наследуются дочерними элементами. Если данный дескриптор встречается несколько раз в определённом правиле @font-face
, то применяется только последний объявленный дескриптор, а все предыдущие объявления данного дескриптора игнорируются.
Использование загруженного шрифта под названием Gentium:
@font-face { font-family: Gentium; src: url(http://example.com/fonts/Gentium.woff); } p { font-family: Gentium, serif; }
Браузер должен скачать Gentium и использовать его при выводе текста на элементах абзаца. Если по какой-то причине сайт содержащий шрифт недоступен, то по умолчанию будет использован шрифт из семейства шрифтов serif.
Данный набор правил @font-face
определяет набор шрифтов, доступных для использования в документах, которые содержат данные правила. При этом когда создаются соответствующие шрифты, то шрифты, определённые с помощью этих правил рассматриваются первыми в отличие от других шрифтов доступных в системе.
Загруженные шрифты доступны только для тех документов, которые ссылаются на них. Процесс активации этих шрифтов не должен делать их доступными для других приложений или документов, которые непосредственно не ссылаются на один и тот же шрифт. Браузеры исполнители, возможно, могут посчитать удобным использование загружаемых шрифтов при отображении символов в других документах, для которых нет других доступных шрифтов используемых как часть процедуры системы подмены шрифтов. Однако, это может привести к снижению безопасности, поскольку содержимое одной страницы сможет влиять на содержимое других страниц и злоумышленник сможет использовать это для осуществления атаки. Эти ограничения не влияют на поведение кэширования, так как шрифты кэшируются таким же образом, как и другие веб-ресурсы.
Это правило следует совместно-направляемому (forward-compatible) разбору правил CSS. Подобно свойствам в описании блока, описаниях любых дескрипторов, не поддерживаемых браузером, они должны быть проигнорированы. Правила @font-face
требуют наличия font-family и src дескриптора; если любой из них отсутствуют, то правило @font-face
является недействительным, и оно должно быть полностью проигнорировано.
В случаях, когда браузеры имеют ограниченную ресурсами платформу или пользуются возможностью отключения загрузки ресурсов шрифта, то правила @font-face
в данной ситуации просто должны быть проигнорированы; поведение отдельных дескрипторов, определённых в данной спецификации, не должно быть изменено.
Название: | font-family |
Значение: | <название-семейства> |
Значение по умолчанию: | N/A |
Этот дескриптор определяет название шрифта, которое будут использоваться при указании данного названия в CSS font family. Этот дескриптор необходим для работы правила @font-face
. Он переопределяет названия шрифтов, содержащихся в безе данных шрифтов. Если название созданного шрифта совпадает с названием системного, то в данной ситуации созданный шрифт эффективно скрывает системный шрифт. Это позволяет веб-автору свободно указывать названия шрифтов, не беспокоясь о возможных конфликтах с названиями системных шрифтов. Кроме того, система подмены шрифтов не должна быть использована относительно данного названия шрифта.
Название: | src |
Значение: | [ <url> [format(<строка> #)]? | <название-версии-шрифта> ] # |
Значение по умолчанию: | N/A |
Этот дескриптор указывает ресурс, содержащий данные шрифта. Этот дескриптор необходим для работы правила @font-face
. Его значение является приоритетным и представляет собой список разделённых запятыми внешних ссылок или локально установленных названий вариантов шрифта. Если шрифт необходим браузеру, то он перебирает набор перечисленных ссылок, причём первая из них может быть сразу же успешно активирована. Шрифты, содержащие неверные данные или локальные версии шрифта, которые невозможно найти игнорируются и браузер загружает следующий шрифт из списка.
Как и с другими URL в CSS, URL может быть относительным, тогда в этом случае он будет установлен относительно расположения таблицы стилей, содержащей правило @font-face
. В случае с SVG-шрифтами, URL-адрес указывает на элемент в документе, который содержит определения SVG шрифта. Если ссылка опущена, то в таком случае подразумевается ссылка на первый заданный шрифт. Точно так же, форматы файлов шрифтов, которые могут содержать более одного шрифта могут загружать один и только один из шрифтов для данного правила @font-face
. Фрагмент с идентификаторами используются для указания, того какой шрифт необходимо загрузить. Если в формате файла не хватает определённого фрагмента, определяющего схему, то в процессе выполнения должна быть использована простая 1-основная схема индексирования (например "шрифт-коллекция#1" для первого шрифта, "шрифт-коллекция#2" для второго шрифта).
src: url(fonts/simple.woff); /* загрузка simple.woff относительно места расположения таблицы стилей */ src: url(/fonts/simple.woff); /* загрузка simple.woff относительно абсолютного местоположения */ src: url(fonts.svg#simple); /* загрузка SVG шрифта с id 'simple' */
Внешние ссылки состоят из URL, за которым следует необязательная подсказка, описывающая формат ресурсов шрифта, на которые ссылается этот URL. Подсказка формата содержит строку списка форматов, которые разделяются запятыми и обозначают хорошо известные форматы шрифтов. Совместимые браузеры должны пропустить загрузку ресурсов шрифта, если названия форматов указывают только на неподдерживаемые или неизвестные форматы шрифтов. Если названия форматов отсутствуют, то браузер должен загрузить ресурсы шрифта.
/* Загрузим WOFF шрифт, если это возможно, в противном случае используем шрифт OpenType */ @font-face { font-family: bodytext; src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("opentype"); }
Форматы, определённые в данной спецификации:
Строка | Формат Шрифта | Общие расширения |
---|---|---|
"woff" | WOFF (Web Open Font Format) | .woff |
"truetype" | TrueType | .ttf |
"opentype" | OpenType | .ttf, .otf |
"embedded-opentype" | Embedded OpenType | .eot |
"svg" | SVG Font | .svg, .svgz |
Учитывая дублирование при общем использовании TrueType и OpenType, названия форматов "truetype" и "opentype" следует рассматривать как синонимы; название формата "opentype" не означает, что шрифт содержит Postscript CFF данные о стиле глифов или сведения о структуре OpenType (для получения более подробной информации смотрим Приложение A).
В случае, если авторы предпочитают использовать локально доступные копии определённого шрифта и загружать его только если он отсутствует, то для этого можно использовать local()
. Локально установленное <название-версии-шрифта> являющееся параметром для local()
это специальный-формат строки, который однозначно идентифицирует один вариант шрифта в шрифте (семействе шрифтов). Синтаксис <название-версии-шрифта> представляет собой уникальное название версии шрифта заключённое между "local(" и ")". При этом название может так же дополнительно быть заключено в кавычки. Если название используется без кавычек, то такое название шрифта обрабатывается согласно правилам; название должно представлять собой последовательность идентификаторов, разделённых пробелами, которое преобразуется в строку, путём объединения идентификаторов разделённых этими самыми пробелами.
/* обычный вариант Gentium */ @font-face { font-family: MyGentium; src: local(Gentium), /* использование локально доступного Gentium */ url(Gentium.woff); /* загрузка Gentium в случае его отсутствия */ }
Для OpenType и TrueType шрифтов, эта строка используется только для соответствия Postscript названию или полному названию шрифта в таблице названий локально доступных шрифтов. Какой тип названия используется, зависит от платформы и шрифта, поэтому авторы должны указывать оба этих названия, чтобы обеспечить соответствие разным платформам. Платформа замещения не должна быть использована в отношении данного названия шрифта.
/* жирная версия Gentium */ @font-face { font-family: MyGentium; src: local(Gentium Bold), /* полное название шрифта */ local(Gentium-Bold), /* Postscript название */ url(GentiumBold.woff); /* загрузка Gentium в случае его отсутствия */ font-weight: bold; }
Так же, как и правило @font-face
определяет характеристики отдельной версии шрифта в шрифте, так и уникальное название, используемое с local()
определяет только лишь одну версию шрифта, а не весь шрифт. Исходя из определённых правил данных OpenType шрифта, название Postscript находится в таблице названий шрифтов в поле с именем nameID = 6 (смотрим [OPENTYPE] для получения более подробной информации). Название Postscript обычно используется как ключ для всех шрифтов на Mac OS X и Postscript CFF шрифтов под Windows. Полное название шрифта (nameID = 4) используется в качестве уникального ключа для шрифтов с TrueType глифами в Windows.
Для OpenType шрифтов с несколькими локализациями полного названия шрифта, используется английская (США) версия (язык ID = 0x409 для ОС Windows и язык ID = 0 для Macintosh) или первая локализация, когда английское (США) полное название шрифта не доступно (OpenType спецификация рекомендует, чтобы все шрифты, как минимум, включали английские (США) названия). Агенты пользователей также должны уметь работать с другими полными названиями шрифта, например, если в определённой системе использующей голландский в качестве локального языка используются соответствующие названия на голландском, которые обычно воспринимается как несовместимые. Это делается, не для того чтобы сделать английские названия менее предпочтительными, а для того чтобы избежать совпадений разных несоответствующих версий шрифтов и локализаций ОС, так как названия стилей шрифтов (например, "bold") часто локализуются на многие языки и множество доступных локализаций широко варьируется в зависимости от платформы и версии шрифта. Браузеры, которые сравнивают полное название шрифта (nameID = 1) с именем стиля (nameID = 2) делают неправильно.
Это также позволяет ссылаться на варианты, которые принадлежат шрифтам, но при этом не могут быть ссылками.
Использование локального шрифта или ссылки на SVG-шрифт в другом документе:
@font-face { font-family: Headline; src: local(Futura-Medium), url(fonts.svg#MyGeometricModern) format("svg"); }
Создание вымышленного названия для локальных японских шрифтов на различных платформах:
@font-face { font-family: jpgothic; src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic); }
Ссылка на версию шрифта, которой нет в шрифте:
@font-face { font-family: Hoefler Text Ornaments; /* имеет те же свойства шрифта, что и Hoefler Text Regular */ src: local(HoeflerText-Ornaments); }
Поскольку полные локализованные названия никогда не совпадают, документ с заголовком правила стилей, который представлен ниже всегда по умолчанию будет воспроизводиться с использованием serif шрифта, независимо от того установлен ли финский язык в качестве определённого параметра языка системы или нет:
@font-face { font-family: SectionHeader; src: local("Arial Lihavoitu"); /* Полное финское название для Arial Bold не сработает */ font-weight: bold; } h2 { font-family: SectionHeader, serif; }
Совместимый браузер никогда бы не загрузил шрифт ‘gentium.eot
’ указанный в приведённом ниже примере, так как он находится в первом объявлении ‘src
’ дескриптора, который переопределяется вторым объявлением в том же правиле @font-face
:
@font-face { font-family: MainText; src: url(gentium.eot); /* для использования в старых версиях агентов пользователей */ src: local("Gentium"), url(gentium.woff); /* переопределяет первое src объявление */ }
Название: | font-style |
Значение: | normal | italic | oblique |
Значение по умолчанию: | normal |
Название: | font-weight |
Значение: | normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Значение по умолчанию: | normal |
Название: | font-stretch |
Значение: | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |
Значение по умолчанию: | normal |
Эти дескрипторы определяют характеристики варианта шрифта и используются в процессе подбора стилей для конкретного варианта. Для шрифта, определённого с помощью нескольких правил @font-face
, браузеры могут загрузить все варианты шрифта или использовать эти дескрипторы для выборочной загрузки шрифтов, которые соответствуют фактическим стилям, используемым в документе. Значениями этих дескрипторов выступают такие же значения, как и для соответствующих свойств шрифта, за исключением относительных ключевых слов, таких как ‘bolder
’ и ‘lighter
’. Если данные дескрипторы опущены, то им устанавливаются значения по умолчанию.
Значение атрибутов этих стилевых версий шрифта используется вместо стиля, подразумеваемого в основе данных шрифта. Это позволяет авторам объединить варианты в гибких комбинациях, даже в ситуациях, когда исходные данные шрифта были устроены по-другому. Браузеры, которые синтезируют жирную и наклонную версию должны применять синтетическое моделирование только в случаях, когда дескрипторы шрифта непосредственно указывают на это, а не исходя из атрибутов стиля указанных в данных шрифта.
Название: | unicode-range |
Значение: | <urange> # |
Значение по умолчанию: | U+0-10FFFF |
Этот дескриптор определяет набор Unicode кодов, которые могут поддерживаться версией шрифта, для которой они объявлены. В качестве значения дескриптора выступает разделённый запятыми список значений из Unicode диапазона (<urange>). Объединение этих диапазонов определяет набор элементов кода, который служит в качестве подсказки для браузера при принятии решения, о целесообразности загрузки ресурса шрифта для данного отрезка текста.
Каждое <urange> значение является UNICODE-RANGE
маркером, состоящим из "U+" или "u+" префикса с последующим диапазоном элементов кода в одной из трёх форм, перечисленных ниже. Диапазоны, которые не вписываются ни в одну из этих форм, являются недействительными и должны привести к игнорированию декларации.
?
’ символы могут обозначать любую шестнадцатеричную цифруОтдельные элементы кода записываются с помощью шестнадцатеричных значений, которые соответствуют символам элементов Unicode кода. Значения Unicode элементов кода должны располагаться от 0 и до 10FFFF включительно. Цифровые значения ASCII элементов кода не чувствительны к регистру символов. Для интервала диапазонов, начальные и конечные элементы кода должны быть в пределах диапазона, указанного выше, при этом конец элементов кода должен быть больше или равен начальному элементу кода.
Шаблонные диапазоны указывают диапазон с помощью символа ‘?’, который не имеет начальной допустимой цифры (например, "U+???") и эквивалентен шаблонному диапазону с начальной цифрой равной нулю (например, "U+0???" = "U+0000-0FFF"). Подстановочные диапазоны, которые выходят за пределы диапазона элементов Unicode кода, являются недействительными. В виду этого, максимальное количестов чисел - ‘?
’ подстановочного символа это пять символов, хотя UNICODE-RANGE
маркер допускает шесть.
В разделённом запятыми списке Unicode диапазонов в объявлении ‘unicode-range
’ дескриптора, диапазоны могут пересекаться. Объединение этих диапазонов определяет набор элементов кода, для которых может быть использован соответствующий шрифт. Браузеры не должны загружать или использовать шрифт для элементов кода, которые не входят в это множество. Браузеры могут нормализовать список диапазонов в списке, который отличается, но представляет тот же набор элементов кода.
Соответствующий шрифт может не содержать глифы для всего набора элементов кода определённых ‘unicode-range
’ дескриптором. При использовании шрифта, эффективным отображением символов считается пересечение элементов кода определённых в ‘unicode-range
’ с таблицей символов шрифта(-ов). Это позволяет авторам определить поддерживаемые диапазоны в условиях широких диапазонов, не беспокоясь о точных диапазонах элементов кода поддерживаемых базовый шрифт.
Несколько правил @font-face
с различными unicode диапазонами для одного шрифта и значениями дескрипторов стиля могут быть использованы для создания сборных шрифтов, которые смешивают глифы из разных шрифтов различных письменностей. Такой подход может быть так же использован для объединения шрифтов, которые содержат символы только для одной письменности (например, латинской, греческой, кириллической) или он может быть использован авторами как способ сегментирования шрифтов в шрифты для часто и редко используемых символов. Так как браузер будет загружать все используемые шрифты, то это необходимо, так как это помогает снизить объём страницы.
Если unicode диапазоны перекрываются для набора правил @font-face
с одним шрифтом и значений дескрипторов стиля, то правила упорядочиваются в порядке обратном тому, в котором они были определены; последнее правило определяет проверено ли первое для данного символа.
Пример диапазонов для конкретных языков или символов:
Би-би-си предоставляет информационные услуги на самых разнообразных языках, многие из которых не очень хорошо поддерживаются на всех платформах. Используя правило @font-face
Би-би-си может применить нужный шрифт для любого из этих языков, как это уже делалось с помощью ручной загрузки шрифтов.
@font-face { font-family: BBCBengali; src: url(fonts/BBCBengali.woff) format("woff"); unicode-range: U+00-FF, U+980-9FF; }
Технические документы часто требуют широкий спектр символов. Проект STIX Fonts - это проект, направленный на обеспечение шрифтами для поддержки широкого спектра технической вёрстка стандартизированным способом. В приведённом ниже примере показано использование шрифта, который обеспечивает глифы для многих математических и технических символов находящихся в пределах Unicode:
@font-face { font-family: STIXGeneral; src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf); unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; }
Этот пример показывает, как автор может переопределить глифы, которые используются в латинских шрифтах в глифы японского шрифта. В первом правиле диапазон не определён, поэтому диапазон определяется по умолчанию. Диапазон, указанный во втором правиле перекрывает первый диапазон, но имеет приоритет, потому что он определяется позже.
@font-face { font-family: JapaneseWithGentium; src: local(MSMincho); /* диапазон не задан, поэтому по умолчанию устанавливается весь диапазон */ } @font-face { font-family: JapaneseWithGentium; src: url(../fonts/Gentium.woff); unicode-range: U+0-2FF; }
Рассмотрим шрифт, созданный с целью оптимизации объёма шрифта путём выделения латинских, японских и других символов из разных файлов шрифтов:
/* размер резервного шрифта: 4.5MB */ @font-face { font-family: DroidSans; src: url(DroidSansFallback.woff); /* диапазон не задан, поэтому по умолчанию устанавливается весь диапазон */ } /* размер японских глифов: 1.2MB */ @font-face { font-family: DroidSans; src: url(DroidSansJapanese.woff); unicode-range: U+3000-9FFF, U+ff??; } /* Размер латинского, греческого и кириллицы наряду с некоторыми знаками препинания и символами: 190KB */ @font-face { font-family: DroidSans; src: url(DroidSans.woff); unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; }
Для простого латинского текста, достаточно загрузить шрифт только с латинскими символами:
body { font-family: DroidSans; } <p>Это является тем</p>
В этом случае браузер сначала проверяет unicode-range для шрифта содержащего латинские символы (DroidSans.woff). Поскольку все символы находятся в диапазоне от U+0-5FF, то браузер загружает шрифт и отображает текст с помощью данного шрифта.
Далее рассмотрим текст, который использует символ стрелки (⇨):
<p>Это ⇨ тем<p>
Браузер так же сначала проверяет unicode-range шрифта, содержащего латинские символы. Так как U +2000-2300 включает в себя код стрелки (U +21 E8), браузер загрузит данный шрифт. Однако для этого символа в латинском шрифт нет соответствующего глифа, поэтому эффективный unicode-range используется для подбора шрифта исключающего данный элемент кода. Затем браузер проверяет японский шрифт. Unicode-range для японского шрифта представляет U+3000-9FFF и U+ff??, не включая U+21E8, так что браузер не загружает японский шрифт. Далее рассматривается резервный шрифт. Правило @font-face
не определяет unicode-range для резервного шрифта, поэтому в качестве его значения выступает диапазон всех элементов Unicode кода. Для отображения символа стрелки загружается и используется резервный шрифт.
Название: | font-variant |
Значение: | normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] |
Значение по умолчанию: | normal |
Название: | font-feature-settings |
Значение: | normal | <feature-tag-value> # |
Значение по умолчанию: | normal |
Эти дескрипторы определяют исходные параметры, которые используются, когда в правиле @font-face
создаётся шрифт для визуализации. Они не влияют на выбор шрифта. Значения идентичны тем, которые определены для соответствующих свойств ‘font-variant
’ и ‘font-feature-settings
’ определённых ниже, за исключением значения ‘inherit
’. Когда используются несколько дескрипторов шрифта или свойств, совокупный эффект при визуализации текста подробно описан в разделе Резолюция Функции Шрифта. В случаях, когда конкретные значения устанавливают запасной синтезированный вариант для некоторых подсвойств ‘font-variant
’, тот же запасной синтезированный вариант применяется и при использовании таких же значений используемых ‘font-variant
’ дескриптором.
Правило @font-face
разработано, чтобы позволить осуществить загрузку ресурсов шрифта, которые загружаются только тогда, когда используются в документе. Таблица стилей может включать в себя только те правила @font-face
предназначенные для создания библиотеки шрифтов, из которых будет создан набор используемых шрифтов; браузеры должны скачать только те шрифты, которые упоминаются в рамках правил стиля, которые применяются к данной странице. Браузеры, которые скачивают все шрифты, определённые в правилах @font-face
не учитывая использование этих шрифтов в пределах данной страницы, считаются не совместимыми. В случаях, когда шрифт может быть загружен в ситуации резервной замены шрифта, браузеры могут скачать такой шрифт, если он содержится в значении ‘font-family
’, которое актуально для данной части текста.
@font-face { font-family: GeometricModern; src: url(font.woff); } p { /* шрифт будет загружен для страниц с р элементами */ font-family: GeometricModern, sans-serif; } h2 { /* шрифт может быть загружен для страниц с h2 элементами, даже если Futura доступен локально */ font-family: Futura, GeometricModern, sans-serif; }
В случаях, когда текстовое содержимое загружается до загрузки доступных шрифтов, браузеры могут отображать текст в том виде, в котором он есть на самом деле, когда загружаемые ресурсы шрифта отсутствуют или браузеры могут отображать текст с помощью резервных шрифтов, чтобы избежать прозрачности текста используется резервный шрифт. В случаях, когда шрифт скачать не удаётся, браузеры всё равно должны отображать текст, иначе простой вывод прозрачного текста считается не совместимым поведением. Авторам рекомендуется указывать резервные шрифты в своих списках шрифтов, которые точно соответствуют метрики загружаемых шрифтов, чтобы избежать серьёзного изменения вида страницы, где это возможно.
Для загрузки шрифта, браузеры должны использовать возможный CORS-поддерживаемый метод, определённый [HTML5] спецификацией для URL, указываемых в правилах @font-face. При получении адреса, браузеры должны использовать "анонимный" режим, установив ссылку источника относительно URL таблицы стилей и установив исходный URL-адрес, данного документа.
Access-Control-Allow-Origin
. В случаях с другими схемами, нет явного механизма, позволяющего загрузку кросс-местоположения, за рамками дозволенного возможного CORS-поддерживаемого метода, который определён или необходим.http://example.com/page.html
и имеет все URL ссылки на допустимые ресурсы шрифтов, поддерживаемые браузером. Ниже будут загружены шрифты, определённые с помощью значений ‘src
’ дескриптора:
/* такое же местоположение (то есть домен, схема, соответствующий порт документа) */ src: url(fonts/simple.woff); /* не перенаправляемые данные url-адреса, рассматриваемые как такое же местоположение */ src: url("data:application/font-woff;base64,..."); /* кросс местоположение, другой домен */ /* ответ заголовка Access-Control-Allow-Origin со значением '*' */ src: url(http://another.example.com/fonts/simple.woff);Шрифты, определённые с помощью значений ‘
src
’ дескриптора представленного ниже не будут загружены:
/* кросс местоположение, другая схема */ /* нет Access-Control-ххх заголовков в ответе */ src: url(https://example.com/fonts/simple.woff); /* кросс местоположение, другой домен */ /* нет Access-Control-ххх заголовков в ответе */ src: url(http://another.example.com/fonts/simple.woff);
Алгоритм ниже описывает, как шрифты, связаны с отдельным процессом работы над текстом. Для каждого символа в процессе выбирается шрифт и выбирается определённая версия шрифта, содержащая глиф для данного символа.
Как часть алгоритма подбора шрифта, описанного ниже, браузер должен сопоставлять соответствующие шрифты, используемые в правилах стиля с фактическими названиями шрифтов, которые содержатся в шрифтах, доступных в данной среде или в шрифтах с названиями определёнными в правилах @font-face
. Браузеры должны сопоставлять эти названия без учёта регистра, используя алгоритм "Регистронезависимый Подбор По Умолчанию", описанный в Unicode спецификации [UNICODE]. Этот алгоритм подробно изложен в разделе 3.13 с названием "Действия Алгоритма По Умолчанию". В частности, алгоритм должен применяться без нормализации используемых строк и без применения какого-либо приспосабливания к конкретному языку. В случае складного метода, определённый в этом случае алгоритм использует побдор с полем статуса файла ‘C
’ или ‘F
’ в файле CaseFolding.txt Базы Данных Символов Unicode.
Для авторов это означает, что названия шрифта совпадают в случае сравнивания их без учёта регистра, независимо от того существуют ли эти названия в шрифтах платформы или в правилах @font-face
содержащихся в таблице стилей. Авторы должны позаботиться, чтобы убедиться, что названия используют последовательность символов в соответствии с фактическим названием шрифта, особенно при использовании комбинаций символов, таких как диакритические знаки. Например, название, которое содержит букву A (U+0041) верхнего регистра за которой следует комбинируемый с буквой знак - кольцо сверху (U+030A), не будет соответствовать названию, которое выглядит так же, но которое изначально использует составной символ - строчная буква a с кружочком сверху (U+00E5) вместо комбинируемой последовательности.
Разработчики должны позаботиться, чтобы убедиться, что данная регистронезависимая строка использует это чёткий алгоритм, а не предполагать, что данная платформа сопоставляет строку обычным способом, как это следует, так как многие из них имеют локализованную специфику поведения или используют некоторый уровень нормализации строк.
Процедура выбора шрифта для данного символа в непрерывной последовательности текста состоит в переборе всех шрифтов, названия которых указанны в свойстве ‘font-family
’, причём после выбора шрифта выбирается версия шрифта с соответствующим стилем, основанным на других свойствах шрифта, а затем определяется наличие соответствующего глифа для данного символа. Это делается с помощью таблицы символов шрифта, данные, которого отображают символы глифов по умолчанию для этого символа. Шрифт рассматривается в плане поддержки определённого символа, если (1) символ содержится в таблице символов шрифтов и (2), если этого требует, данная письменность, то формируемая информация доступна для этого символа.
Некоторые устаревшие шрифты могут иметь тот или иной символ в таблице символов, но не иметь для него информации о формообразовании (например, OpenType layout tables или Graphite tables) необходимой для правильной визуализации отрезков текста, содержащих этот символ.
Последовательности элементов кода, состоящие из базового символа и последовательности сочетания символов, обрабатываются несколько иначе, для получения более подробной информации смотрим раздел ниже о подборе кластера.
В данной процедуре, вариант по умолчанию для данного шрифта определяется как вариант, который будет выбран, в случае если все свойства стиля шрифта будут установлены в их первоначальное значение.
font-family
’.@font-face
, а затем среди доступных системных шрифтов, названия которых соответствуют сравнению без учёта регистра символов, как описано в предыдущем разделе. В системах, которые содержат шрифты с несколькими локализованными названиями, браузеры должны уметь применять любое из этих названий, независимо от основного языка системы или используемой API платформы. Если ресурсы шрифта, определённые для данной версии в правиле @font-face
недоступны или содержат недопустимые данные шрифта, то версия должна рассматриваться таким образом, как будто её нет в шрифте. Если в шрифте определённом с помощью правила @font-face
отсутствует версия, то шрифт должен рассматриваться как отсутствующий; в этом случае согласование платформы шрифта с указанным именем, не должно быть осуществлено.@font-face
с одинаковыми значениями дескрипторов шрифта, но разными ‘unicode-range
’ значениями на данном этапе рассматриваются как один составной вариант:
font-stretch
’ проверяется первым. Если согласуемый набор содержит версии со значениями ширины, соответствующими ‘font-stretch
’ значению, то версии с другими значениями ширины удаляются из соответствующего набора. Если нет версии, которая точно совпадает со значением ширины, то используется ближайшая ширина. Если ‘font-stretch
’ имеет значение ‘normal
’ или одно из уплотнённых (condensed) значений, то сначала проверяются более узкие значения ширины, а затем уже более широкие значения. Если значение свойства ‘font-stretch
’ является одним из расширенных (expanded) значений, то сначала проверяются более широкие значения, а затем уже более узкие значения. Как только ближайшая подходящая ширина определена в результате этого процесса, то версии с другой шириной удаляются из соответствующего набора.font-style
’ проверяется следующим. Если ‘font-style
’ имеет значение ‘italic
’, то курсивная версия проверяется первой, затем проверяется наклонная версия, и после проверяется нормальная версия. Если используется значение ‘oblique
’, то наклонная версия проверяется первой, затем проверяется курсивная версия, и после проверяется нормальная версия. Если используется значение ‘‘normal
’’, то нормальная версия проверяется первой, затем проверяется наклонная версия, и после проверяется курсивная версия. Версии с другими значениями стиля исключаются из соответствующего набора. Браузерам разрешается отделять курсивные и наклонные версии внутри платформы шрифта, но этого не требуется, так что все, курсивные и наклонные версии могут рассматриваться в качестве курсивной версии. Однако, в пределах шрифтов, определённых с помощью правила @font-face
, курсивные и наклонные версии следует отделять, используя значение ‘font-style
’ дескриптора. Для шрифтов, которые не имеют курсивной или наклонной версии, браузеры могут создавать искусственные наклонные версии, если это допускается значением свойства font-synthesis
.font-weight
’ согласуется следующим, поэтому он всегда будет уменьшать соответствующий набор до одной версии шрифта. Если используются значения относительной жирности bolder/lighter, то действительная степень жирности рассчитывается на основе наследуемой степени жирности, как описано в определении свойства ‘font-weight
’. Учитывая желаемую степень жирности и доступные степени жирности версии шрифта в соответствующем наборе после вышеупомянутых шагов, если желаемая степень жирности доступна, то версия соответствует. В противном случае, степень жирности выбирается с помощью следующих правил:
font-size
’ значения должны находиться в пределах допустимых значений браузера. (Как правило, размеры масштабируемых шрифтов округляются до ближайшего целого значения выражаемого в пикселях, в то время как погрешность для растровых шрифтов может составлять около 20%.) Дальнейшие вычисления, например, с ‘em
’ значениями в других свойствах, основываются на значении ‘font-size
’, которое используется, а не то, которое указано.Если соответствующая версия определяется с помощью правила @font-face
, то браузеры должны использовать описанную ниже процедуру, чтобы выбрать одну версию шрифта:
unicode-range
’ дескриптора включает сомнительный символ, то шрифт загружается.Когда подобранная версия является составным вариантом, браузер должен воспользоваться описанной выше процедурой для каждой версии в составном варианте в порядке, обратном тому который определён в правиле @font-face
.
Во время загрузки шрифта, браузер может либо подождать, пока шрифт полностью загрузится, либо сразу применить шрифт с другой метрикой и изменить визуализацию, как только шрифт будет загружен.
Если соответствующая версия не существует или не содержит глиф для выводимого символа, то из списка шрифтов выбирается следующее название шрифта и повторяются предыдущие три шага. При этом глифы из других версий шрифта, не рассматриваются. Единственным исключением является то, что браузеры по желанию могут заменить наклонную версию по умолчанию на синтетическую версию, в случае если эта версия поддерживает данный глиф и синтез этих версий разрешён значением свойства ‘font-synthesis
’. Например, курсивная версия, синтезированная из обычной версии, может быть использована, если курсивная версия шрифта не поддерживает глифы для арабской письменности.
Оптимизация этого процесса разрешается при условии, что реализация процесса поведёт себя так, как будто алгоритм был соблюдён в точности. Согласование должно происходить в строго определённом порядке, чтобы убедиться, что результаты выдаваемые браузерами являются как можно более последовательными, учитывая, что используется одинаковый набор доступных шрифтов и технологии визуализации.
Первый доступный шрифт, используемый в определении font-relative размеров таких как ‘ex
’ и ‘ch
’, определяется как первый доступный шрифт, который будет соответствовать любому символу данного шрифта в списке ‘font-family
’ (или шрифта используемого браузером по умолчанию, если ни один шрифт из списка не доступен).
Если текст содержит символы, такие как объединённые знаки, то в идеале основной символ должен быть представлен, используя тот же шрифт что и знак, это гарантирует правильную расстановку знака. По этой причине, алгоритм подбора шрифтов для кластеров является более специализированным, чем в общем случае сам по себе подбор одного символа. Для последовательностей, содержащих вариации селекторов, которые указывают точный глиф, который будет использоваться для данного символа, браузер постоянно пытается использовать систему подмены шрифтов, чтобы найти подходящий глиф, прежде чем использовать глиф по умолчанию для базового символа.
Последовательность элементов кода, содержащая совмещённый знак или другие модификаторы называется графема кластера (смотрим [CSS3TEXT] для получения более подробной информации). Для данного кластера, содержащего базовый символ b и последовательность объединённых символов c1, c2…, весь кластер является соответствующим, с помощью следующих действий:
Соответствующий CSS шрифт всегда применяется на отрезке текста, содержащем Unicode символы, таким образом, документы, использующие устаревшие кодировки, предположительно были перекодированы перед применением соответствующих шрифтов. Для шрифтов, которые содержат таблицы символов и для устаревших кодировок и для Unicode, содержимое таблиц символов устаревших кодировок не должно оказывать никакого влияния на результаты процесса подбора шрифтов.
Процесс подбора шрифтов не предполагает, что текст находится в любой нормализованной или денормализованной форме (смотрим [CHARMOD-NORM] для получения более подробной информации). Шрифты могут поддерживать только предварительно составленные формы и не разлагать последовательность базового символа и совмещённых меток. Авторы должны всегда адаптировать свой выбор шрифтов для определённого содержания, в том числе, и для случаев с содержанием нормированных или денормализованных потоков символов.
Если данный символ является частью Области Приватно-Используемых Unicode элементов кода, то браузеры должны сопоставлять только названия шрифтов в списке ‘font-family
’, которые при этом не должны являться названиями семейств шрифтов. Если ни одно из названий шрифтов в списке ‘font-family
’ не содержит глиф для этого элемента кода, то браузеры должны отображать некоторые формы отсутствующих глифов символа для этого знака, а не пытаться применять систему подмены шрифтов для этого элемента кода. При подборе замены для символа U+FFFD, браузеры могут пропустить процесс подбора шрифта и сразу отобразить некоторую форму недостающего глифа символа, они не требуются для отображения глифа из шрифта, который будет выбран в процессе подбора шрифтов.
В общем, шрифты для данного набора шрифтов будут иметь такую же или подобную таблицу символов. Процесс, описанный здесь, предназначен для обработки даже шрифтов, содержащих варианты с большими вариациями таблиц символов. Однако авторы должны учесть, что использование таких шрифтов может привести к неожиданным результатам.
Алгоритм описанный выше отличается от алгоритма CSS 2.1 в ряде ключевых мест. Эти изменения были сделаны, чтобы лучше отразить реальное поведение подбора шрифтов через реализацию браузера.
Различия в сравнении с алгоритмом подбора шрифтов в CSS 2.1:
Полезно отметить, что синтаксис CSS селектора может быть использован для создания типографии чувствительной к языку. Например, некоторые китайские и японские символы унифицированы и имеют такие же Unicode элементы кода, хотя абстрактные глифы двух языков не совпадают.
*:lang(ja) { font: 900 14pt/16pt "Heisei Mincho W9", serif; } *:lang(zh-Hant-TW) { font: 800 14pt/16.5pt "Li Sung", serif; }
Выбирает любой элемент, который имеет заданный язык — японский или традиционный китайский, используемый в Тайване — и использует соответствующий шрифт.
Современные шрифтовые технологии поддерживают различные передовые типографические и языковые возможности шрифта. С помощью этих функций, один шрифт может предоставить глифы для широкого круга лигатур, контекстных и стилистических вариантов, табличных и цифр старого стиля, капители, автоматические дроби, каллиграфические элементы, и их заменители, характерные для данного языка. Чтобы разрешить авторам осуществлять контроль над этими возможностями шрифтов, в CSS3 свойство ‘font-variant
’ было расширено. В настоящее время оно функционирует как условное сокращение для набора свойств, которые обеспечивают контроль над стилистическими особенностями шрифта.
Простые шрифты, используемые для отображения латинского текста, используют очень простую модель обработки. Шрифты содержат таблицу символов, которая отображает каждый символ глифа для данного символа. Глифы для последующих символов просто располагаются один за другим вдоль непрерывной последовательности текста. Современные форматы шрифтов, такие как OpenType и AAT (Apple Advanced Typography) используют более сложную модель обработки. Глиф для данного символа может быть выбран и расположен не только на основе элемента кода самого символа, но также и на основе соседних символов, а также языка, письменности, и включенности функций для текста. Особенные шрифты могут потребоваться для конкретных письменностей или рекомендоваться в качестве включения по умолчанию, или могут быть стилистическими особенности предназначеными для использования под управлением автора.
Для хорошего визуального представления этих функций смотрим [OPENTYPE-FONT-GUIDE]. Для более подробного описания обработки глифа для OpenType шрифтов, смотрим [WINDOWS-GLYPH-PROC].
Стилистические особенности шрифта можно разделить на две большие категории: первые влияют на согласование глифов формы с окружающим контекстом, например, кёрнинг и особенности лигатуры, и вторые представляют собой small-caps/капитель, верхний/нижний индекс и альтернативные возможности, которые влияют на выбор формы.
Вложенные свойства ‘font-variant
’, перечисленные ниже, используются для управления этими стилистическими особенностями шрифта. Они не контролируют особенности, необходимые для отображения некоторых письменностей, таких как особенности OpenType, используемые при отображении текста на арабском или индийском языке. Они влияют на выбор глифа и позиционирование, но не влияют на выбор шрифта, как описано в разделе подбора шрифта (за исключением случаев, необходимых для обеспечения совместимости с CSS 2.1).
Для обеспечения стабильного поведения браузеров, эквивалентные параметры OpenType свойства перечисляются для отдельных свойств и являются нормативными. При использовании других форматов шрифтов они должны использоваться в качестве руководства для сопоставления CSS особенностей значений свойств шрифтов с конкретными функциями шрифта.
OpenType также поддерживает выбор особенных глифов для конкретного языка и позиционирование, так что текст может отображаться неправильно в случаях, когда язык указывает определённый способ отображения. Многие языки имеют общую письменность, но форма некоторых букв может меняться в зависимости от этих языков. Например, некоторые кириллические буквы имеют различные формы в русском и болгарском тексте. В латинском тексте, для визуализации последовательности "fi" может использоваться fi-лигатура, не имеющая точки над "i". Однако, в таких языках как турецкий, который использует "i" как с точкой, так и без неё, необходимо не использовать эту лигатуру или использовать специализированную версию, которая содержит точку над "i". В приведённом ниже примере показано изменение внешнего вида текста при использовании конкретного языка на основе стилистических традициях в испанской, итальянской и французской орфографии:
Если язык содержимого элемента известен в соответствии с правилами языка документа, то браузеры должны вывести систему языка OpenType от языка содержимого и использовать его при выборе и позиционировании глифов используя шрифт OpenType.
Для OpenType шрифтов, в некоторых случаях это может быть необходимо для того, чтобы явно объявить язык OpenType, который будет использоваться, например, при отображении текста на определённом языке, который использует типографские условия другого языка или в случае, когда шрифт явно не поддерживает данный язык, но поддерживает язык, который разделяет общие типографские условия. Для этой цели используется свойство ‘font-language-override
’.
Название: | font-kerning |
Значение: | auto | normal | none |
Значение по умолчанию: | auto |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Кёрнинг - это контекстная регулировка расстояния между глифами. Это свойство управляет метрическим кёрнингом, который использует настройки данных, содержащихся в шрифте.
Для шрифтов, которые не включают кёрнинг данные этого свойства, не будет видимого эффекта. При визуализации OpenType шрифтов, [OPENTYPE] спецификация предполагает, что кёрнинг был включён по умолчанию. Когда кёрнинг включён, включается функция OpenType kern (для вертикального текста вместо данной функции включается функция vkrn). Браузеры также должны поддерживать шрифты, которые поддерживают кёрнинг только с помощью данных содержащихся в kern таблице шрифта, как указано в спецификации OpenType. Если свойство ‘letter-spacing
’ определено, то кёрнинг корректировка считается частью интервала по умолчанию и корректировка межбуквенного интервала вносится после применения кёрнинга.
Если установлено значение ‘auto
’, то браузер может определить, следует ли применять кернинг или нет, основываясь на ряде факторов: размере текста, письменности, или других факторах, которые влияют на скорость обработки текста. Авторы, которые хотят иметь правильный кёрнинг, должны использовать ‘normal
’, чтобы явно включить кёрнинг. Кроме того, некоторые авторы предпочитают отключать кёрнинг в ситуациях, когда производительность важнее точного внешнего вида. Тем не менее, в хорошо разработанных современных реализациях использование кёрнинга, как правило, не имеет большого влияния на скорость визуализации текста.
Название: | font-variant-ligatures |
Значение: | normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Лигатуры и контекстные формы способов комбинирования глифов, для создания более согласованных форм.
<common-lig-values> = [ common-ligatures | no-common-ligatures ]
<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
<contextual-alt-values> = [ contextual | no-contextual ]
Отдельные значения имеют следующий смысл:
normal
’ указывает, что общие функции включены по умолчанию, как описано в следующем разделе. Для OpenType шрифтов, общие лигатуры и контекстные формы включены по умолчанию, а дискреционные и исторические лигатуры нет.Обязательные лигатуры, необходимые для правильной визуализации сложных письменностей, не влияют на указанные выше параметры, в том числе и ‘none
’ (функция OpenType: rlig).
Название: | font-variant-position |
Значение: | normal | sub | super |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Это свойство используется для включения типографских подстрочных и надстрочных глифов. Эти альтернативные глифы, располагаются в том же em-поле, в котором расположены глифы по умолчанию и предназначены для того, чтобы быть выложенными на эту же базовую линию глифов по умолчанию, без изменения размера или положения базовой линии. Они спроектированы в соответствии с окружающим текстом и будут более удобным для чтения, так как не будут влиять на высоту строки.
Отдельные значения имеют следующий смысл:
Принимая во внимание семантический характер верхних и нижних индексов, при установленном значении ‘sub
’ или ‘super
’ для данной непрерывной последовательности текста, если соответствующие варианты глифа не доступны для всех символов, то смоделированные глифы должны быть синтезированы для всех символов с использованием урезанных форм глифов, которые будут использоваться без применения этой функции. Это делается за один подход, чтобы избежать смеси вариантов глифов и синтезированных, которые бы не выравнивались правильно. В случае OpenType шрифтов, которые не имеют подстрочные или надстрочные глифы для данного символа, браузеры должны использовать соответствующую подстрочную и надстрочную метрику, указанную в выбранных шрифтах OS/2 таблицы [OPENTYPE] для расчёта размеров и смещений синтезированных заменителей.
В ситуациях, когда текстовые декорации применяются только к тексту, содержащему надстрочные и подстрочные глифы, то должны быть использованы синтезированные глифы для того, чтобы избежать проблем с размещением декораций.
В прошлом, браузеры использовали font-size и vertical-align имитируя верхние и нижние индексы для элементов sub
и sup
. Чтобы сделать обратно совместимый способ определения верхних и нижних индексов, рекомендуется, чтобы авторы использовали условные правила [CSS3-CONDITIONAL] для того, чтобы старые браузеры по-прежнему отображали подстрочные и надстрочные индексы через старый механизм.
Авторы должны иметь в виду, что шрифты, как правило, предусматривают только подстрочные и надстрочные глифы для подмножества всех символов, поддерживаемых шрифтом. Например, пока подстрочные и надстрочные глифы часто доступны для латинских чисел, глифов пунктуации и реже предусматриваются для буквенных символов. Синтетические правила резервирования, определённые для этого свойства гарантируют, что верхние и нижние индексы всегда будут отображаться, но их внешний вид может не соответствовать ожиданиям автора, в случае если используемый шрифт не обеспечивает соответствующий альтернативный глиф для всех символов, содержащихся в верхнем и нижнем индексе.
Это свойство не является передаваемым. Применяя его к элементам внутри верхнего или нижнего индекса оно не будет передаваться вложенному подстрочному или надстрочному глифу. Изображения, содержащиеся в отрезках текста, где свойство принимает значение ‘sub
’ или ‘super
’ будет отображено просто, как если бы значение было ‘‘normal
’’.
Из-за этих ограничений, ‘font-variant-position
’ не рекомендуется для использования в таблицах стилей браузера. Авторы должны использовать его в тех случаях, когда верхние или нижние индексы будут содержать только узкий диапазон символов, поддерживаемых указанным шрифтом.
Варианты глифов используют ту же базовую линию, которую используют глифы по умолчанию. Там нет смещения в расположении вдоль базовой линии, так что использование вариантов глифов не влияет на высоту блока строки и не изменяет его высоту. Это делает верхние и нижние индексы вариантов идеально подходящими для ситуаций, когда важно, чтобы строки остались постоянными, подобно нескольким столбцам в макете.
Стили выставляемые по умолчанию для sub элемента в обычном браузере:
sub { vertical-align: sub; font-size: smaller; line-height: normal; }
Используя font-variant-position, указываем типографские нижние индексы таким образом, чтобы эти индексы отображались и в старых браузерах:
@supports ( font-variant-position: sub ) { sub { vertical-align: baseline; font-size: 100%; line-height: inherit; font-variant-position: sub; } }
Браузеры, которые поддерживают свойство ‘font-variant-position
’ будут выбирать подстрочный вариант глифа и отображать это без корректировки базовой линии или font-size. Старые агенты пользователей будут игнорировать определение свойства ‘font-variant-position
’ и использовать стандартные значения по умолчанию для нижних индексов.
Название: | font-variant-caps |
Значение: | normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Это свойство позволяет выбирать альтернативные глифы, используемые для небольших или миниатюрных заглавных букв или для озаглавливания. Эти глифы специально предназначены, для того чтобы гармонично сочетаться с окружающими нормальными глифами, для поддержания размера и читаемости, которая страдает в случае когда текст просто изменяется, чтобы этому соответствовать.
Отдельные значения имеют следующий смысл:
Наличие этих глифов зависит от того определена ли данная функция в списке компонентов шрифта или нет. Браузер дополнительно может принять решение на основе каждого шрифта, но этого не следует делать на основе каждого отдельного символа.
Некоторые шрифты могут поддерживать только часть или вообще ни одной из функций, описанных для данного свойства. Для обеспечения обратной совместимости с CSS 2.1, если указано ‘small-caps
’ или ‘all-small-caps
’, но капитель глифы не доступны для данного шрифта, то браузеры должны сымитировать капитель шрифт, например, путём взятия обычного шрифта и замены глифо строчных букв с масштабированием версий глифов под символы верхнего регистра (в случае ‘all-small-caps
’ производится замена глифов как для прописных, так и для строчных букв).
Чтобы соответствовать окружающему тексту, шрифт может предоставить альтернативные глифы для регистронезависимых символов в случае, когда эти функции включены, но если браузер имитирует капитель, то он не должен пытаться имитировать заменители для элементов кода, которые считаются регистронезависимыми.
Если ‘petite-caps
’ или ‘all-petite-caps
’ указаны для шрифта, который не поддерживает эти функции, то свойство ведёт себя так, как если бы был указан ‘small-caps
’ или ‘all-small-caps
’, соответственно. Если ‘unicase
’ указан для шрифта, который не поддерживает эту функцию, то свойство ведёт себя так, как если бы ‘small-caps
’ было применено только к заглавным буквам нижнего регистра. Если ‘titling-caps
’ указан для шрифта, который не поддерживает эту функцию, то это свойство не имеет видимого эффекта. Когда синтезируются капитель глифы используемые для шрифтов, которые не имеют прописных и строчных букв, то ‘small-caps
’, ‘all-small-caps
’, ‘petite-caps
’, ‘all-petite-caps
’ и ‘unicase
’ не создают видимого эффекта.
Когда преобразованная оболочка используются для имитации капители, то она должна соответствовать тем, которые используются для свойства ‘text-transform
’.
В крайнем случае, немасштабируемые прописные глифы букв в нормальном шрифте могут заменить глифы в капитель шрифте так, что текст будет выведен прописными буквами.
Цитата в первой строке отображается курсивом с капителью:
blockquote { font-style: italic; } blockquote:first-line { font-variant: small-caps; } <blockquote>I'll be honor-bound to slap them like a haddock.</blockquote>
Название: | font-variant-numeric |
Значение: | normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Регулирует формы чисел. В приведённом ниже примере показано, как некоторые из этих значений могут быть объединены, чтобы влиять на визуализацию табличных данных со шрифтами, которые поддерживают эти функции. В обычном текстовом абзаце, пропорциональные числа используются, несмотря на то, что табличные числа используются так, что колонки чисел выстраиваются надлежащим образом:
Возможные комбинации:
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
Отдельные значения имеют следующий смысл:
В случае ‘ordinal
’, порядковые формы часто выглядят так же, как и надстрочные формы, но они обозначаются по-разному.
Для верхних индексов, свойство variant применяется только к sub элементу, содержащему верхний индекс:
sup { font-variant-position: super; } x<sup>2</sup>
Для порядковых чисел, свойство variant применяется ко всему порядковому номеру, а не только к суффиксу (или к содержимому абзаца):
.ordinal { font-variant-numeric: ordinal; } <span class="ordinal">17th</span>
В данном случае только "th" появится в порядковой форме, а цифры останутся неизменными. В зависимости от типографских традиций, используемых в данном языке, порядковые формы могут отличаться от надстрочных форм. В итальянском, например, порядковые формы иногда включают подчёркивание.
Ниже представлен простой рецепт стейка в маринаде, отображаемый с автоматическим преобразованием дробей и числами в старинном стиле:
.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; } <h4>Steak marinade:</h4> <ul> <li><span class="amount">2</span> ст.л. оливкового масла</li> <li><span class="amount">1</span> ст.л. лимонного сока</li> <li><span class="amount">1</span> ст.л. соевого соуса</li> <li><span class="amount">1 1/2</span> ст.л. сухого измельчённого лука</li> <li><span class="amount">2 1/2</span> ч.л. итальянской приправы</li> <li>Соль & перец</li> </ul> <p>Смешайте мясо с маринадом и поставьте в холодильник на несколько часов или на всю ночь.</p>
Обратите внимание, что функция дробей применяется только к определённым значениям, а не ко всему абзацу. Шрифты часто реализуют эту функцию с помощью контекстных правил, основанных на использовании символа косой черты (‘/
’). Как таковая, она не подходит для использования в качестве стиля уровня абзаца.
Название: | font-variant-alternates |
Значение: | normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ] |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Для любого символа, шрифты могут предоставить различные варианты начертания глифов в дополнение к стандартным глифам для этого символа. Это свойство обеспечивает контроль над выбором этих вариантов начертания глифов.
Для многих из значений свойств, перечисленных ниже, доступны несколько различных вариантов начертания глифов. Сколько альтернатив доступно и что они собой представляют, указано в font-specific, которое в определённых ниже значениях помечено как конкретный шрифт. Так как природа этих альтернатив это font-specific, то правило @font-feature-values
используется для определения значения для конкретного шрифта или набора шрифтов, которые связывают font-specific числовым <feature-index>
с пользовательским <feature-value-name>
, который затем используется в этом свойстве, для выбора конкретных альтернатив:
@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } } p { font-family: Noble Script; font-variant-alternates: swash(flowing); /* использование альтернативной рукописи # 2 */ }
Когда конкретный <feature-value-name>
не был определён для данного шрифта или для конкретного типа объектов, то вычисленное значение должно быть таким же, как если бы он был определён. Однако, значения свойств, которые содержат неопределённые <feature-value-name>
идентификаторы, должны быть проигнорированы при выборе глифов.
/* эти два правила стиля фактически одно и тоже */ p { font-variant-alternates: swash(unknown-value); } /* значение не определено, игнорируется */ p { font-variant-alternates: normal; }
Это позволяет определять и использовать значение для данного шрифта, но оно игнорируется, если используется запасной вариант, так как имя шрифта будет отличаться. Если заданное значение находится за пределами диапазона, поддерживаемого данным шрифтом, то значение игнорируется. Эти значения никогда не применяются к семействам шрифтов.
Отдельные значения имеют следующий смысл:
ornaments
’.@font-feature-values
Некоторые из возможных значений ‘font-variant-alternates
’, перечисленных выше, помечены как конкретный шрифт. Для таких функций шрифта можно определить не только глиф, но и набор альтернативных глифов с индексами, чтобы можно было выбрать определённую альтернативу. Так как это конкретный шрифт, то правило @font-feature-values
используется для определения названий значений индексов для данного шрифта.
Смотрим справочный раздел по объектной модели для получения информации о интерфейсах, используемых для изменения этих правил через CSS Object Model.
В случае с прописной Q, в приведённом выше примере, прописное начертание может быть указано с помощью этих правил стиля:
@font-feature-values Jupiter Sans { @swash { delicate: 1; flowing: 2; } } h2 { font-family: Jupiter Sans, sans-serif; } /* Указываем второй вариант рукописного начертания в h2 заголовках */ h2:first-letter { font-variant-alternates: swash(flowing); } <h2>Quick</h2>
Если Jupiter Sans присутствует, то будет задействован второй альтернативный вариант рукописного начертания. Если отсутствует, то рукописный символ не будет показан, так как данное название значения "flowing" определено только для шрифта Jupiter Sans. @-метка указывает название значения свойства, для которого может быть использовано названное значение. Название "flowing" выбирается автором. Индексы, которые представляют альтернативы, определяются в пределах данных указанного шрифта.
Правило @font-feature-values
состоит из списка шрифтов, за которым следует блок, содержащий индивидуальные значения функции блоков, которые принимают форму @-правила. Каждый блок определяет набор названных значений для конкретной функции шрифта, когда используется данный набор шрифтов. Фактически, они определяют отображение ⟨шрифт, функция, ident⟩ → ⟨значения⟩, где ⟨значения⟩ являются числовыми индексами, используемыми для конкретных функций, определённых для данного шрифта.
С точки зрения грамматики, эта спецификация определяет следующие элементы:
font_feature_values_rule : FONT_FEATURE_VALUES_SYM S* font_family_name_list S* '{' S* feature_value_block? [ S* feature_value_block? ]* '}' S* ; font_family_name_list : font_family_name [ S* ',' S* font_family_name ]* ; font_family_name : STRING | [ IDENT [ S* IDENT ]* ] ; feature_value_block : feature_type S* '{' S* feature_value_definition? [ S* ';' S* feature_value_definition? ]* '}' S* ; feature_type: ATKEYWORD ; feature_value_definition : IDENT S* ':' S* NUMBER [ S* NUMBER ]* ;
Отдельные значения имеют следующий смысл:
@{F}{O}{N}{T}{-}{F}{E}{A}{T}{U}{R}{E}{-}{V}{A}{L}{U}{E}{S} {return FONT_FEATURE_VALUES_SYM;}
Значения функции блоков обрабатываются как эт-правила, они включают всё, что расположено до следующего блока или точки с запятой, в зависимости от того что наступит раньше.
Список семейств шрифтов это список разделённый запятыми и состоящий из имён семейств шрифтов, которые соответствуют определению <название-семейства> свойства ‘font-family
’. Это означает, что допускаются только названные шрифты, поэтому правила, которые включают общие или системные шрифты в список шрифтов являются синтаксическими ошибками. Однако, если браузер определяет семейство шрифтов в качестве конкретного названия шрифта (например Helvetica), то будут использоваться параметры, связанные с данным названием шрифта. Если в списке шрифтов возникают синтаксические ошибки, то все правила должны быть проигнорированы.
В значениях функции блоков, типом функции является ‘@
’, за которым следует название одного из значений свойств конкретных шрифтов ‘font-variant-alternates
’ (например @swash
). Идентификаторы, используемые в определениях значений функции, следуют правилам CSS идентификаторов пользователя и являются чувствительными к регистру. Они уникальны только для данного набора шрифтов и типа функции. Один и тот же идентификатор, используемый с другим типом функции, рассматривается как отдельное и уникальное значение. Если же идентификатор определяется несколько раз для данного типа функции и шрифта, то используется последнее указанное значение. Значения, связанные с данным идентификатором ограничены целочисленными значениями 0 или больше.
Когда синтаксические ошибки происходят в функции определения значения, например, такие как недопустимые идентификаторы или значения, то вся функция определения значения должна быть опущена, так же как обрабатываются синтаксические ошибки в декларациях стиля. Если тип функции является недействительным, то все связанные с ней значения функций блока должен быть проигнорированы.
Правила, которые эквивалентны данной обработки синтаксических ошибок:
@font-feature-values Bongo { @swash { ornate: 1; } annotation { boxed: 4; } /* должно быть @annotation! */ @swash { double-loops: 1; flowing: -1; } /* отрицательное значение */ @ornaments ; /* неполное определение */ @styleset { double-W: 14; sharp-terminals: 16 1 } /* отсутствует ; */ redrum /* случайная описка */ }
Приведённый выше пример эквивалентен:
@font-feature-values Bongo { @swash { ornate: 1; } @swash { double-loops: 1; } @styleset { double-W: 14; sharp-terminals: 16 1; } }
Если несколько правил @font-feature-values
определены для данного шрифта, то эти определённые итоговые значения являются объединением определений, содержащихся в этих правилах. Это предоставляет набор названных значений, которые будут определены для данного шрифта глобально для сайта и конкретных дополнений внесённых в страницы.
Использование на сайте и в каждой странице значений функции:
site.css: @font-feature-values Mercury Serif { @styleset { stacked-g: 3; /* "высокие" версии g, a */ stacked-a: 4; } } page.css: @font-feature-values Mercury Serif { @styleset { geometric-m: 7; /* альтернативная версия m */ } } body { font-family: Mercury Serif, serif; /* одновременное использование высокой g и альтернативной m */ font-variant-alternates: styleset(stacked-g, geometric-m); }
Использование совместно называемых значений позволяет авторам использовать правило единого стиля, чтобы охватить набор шрифтов, в которых основной селектор отличается от остальных шрифтов. Если один из шрифтов в приведённом ниже примере будет найден, то будет использоваться глиф числа обведённый кругом:
@font-feature-values Taisho Gothic { @annotation { boxed: 1; circled: 4; } } @font-feature-values Otaru Kisa { @annotation { circled: 1; black-boxed: 3; } } h3.title { /* форма круга определена для обоих шрифтов */ font-family: Taisho Gothic, Otaru Kisa; font-variant: annotation(circled); }
Больше всего конкретный шрифт ‘font-variant-alternates
’ значений свойства принимает одно значение (например ‘swash
’). Значение свойства ‘character-variant
’ допускает два значения, а ‘styleset
’ допускает неограниченное количество.
Для значения свойства styleset, несколько значений указывают наборы стилей, которые должны быть включены. Значения от 1 до 99 задействуют функции OpenType то ss01 до ss99. Однако, стандарт OpenType официально определяет только от ss01 до ss20. Для OpenType шрифтов, значения больше, чем 99 или значение равное 0 в процессе анализа не генерируют ошибку синтаксиса, но не задействует никаких функций OpenType.
@font-feature-values Mars Serif { @styleset { alt-g: 1; /* подразумевает ss01 = 1 */ curly-quotes: 3; /* подразумевает ss03 = 1 */ code: 4 5; /* подразумевает ss04 = 1, ss05 = 1 */ } @styleset { dumb: 125; /* >99, игнорируется */ } @swash { swishy: 3 5; /* более 1 значения рукописного начертания, синтаксическая ошибка */ } } p.codeblock { /* подразумевает ss03 = 1, ss04 = 1, ss05 = 1 */ font-variant-alternates: styleset(curly-quotes, code); }
Для character-variant, одно значение от 1 до 99 указывает на включение OpenType функции находящейся от cv01 до cv99. Для OpenType шрифтов, значения больше, чем 99 или значение равное 0 игнорируются, но при этом не генерируется ошибка синтаксиса при анализе, но так же не включаются функции OpenType. Когда перечислены два значения, то первое значение указывает на используемую функцию, а второе значение на значение, передаваемое этой функции. Если данному названию присваивается более чем два значения, то возникает синтаксическая ошибка и все определённые значения функции игнорируются.
@font-feature-values MM Greek { @character-variant { alpha-2: 1 2; } /* подразумевает cv01 = 2 */ @character-variant { beta-3: 2 3; } /* подразумевает cv02 = 3 */ @character-variant { epsilon: 5 3 6; } /* больше 2-х значений, синтаксическая ошибка, определение игнорируется */ @character-variant { gamma: 12; } /* подразумевает cv12 = 1 */ @character-variant { zeta: 20 3; } /* подразумевает cv20 = 3 */ @character-variant { zeta-2: 20 2; } /* подразумевает cv20 = 2 */ @character-variant { silly: 105; } /* >99, игнорируется */ @character-variant { dumb: 323 3; } /* >99, игнорируется */ } #title { /* использование третьего альтернативного beta и первого альтернативного gamma */ font-variant-alternates: character-variant(beta-3, gamma); } p { /* zeta-2 следует после zeta, подразумевает cv20 = 2 */ font-variant-alternates: character-variant(zeta, zeta-2); } .special { /* zeta следует после zeta-2, подразумевает cv20 = 3 */ font-variant-alternates: character-variant(zeta-2, zeta); }
На рисунке выше, красный текст отображается с использованием шрифта, содержащим варианты символов, которые имитируют формы символов, отлитые на византийской печати 8-го века н.э. Двумя строками ниже тот же текст отображается шрифтом без вариантов. Обратите внимание на два варианта для символов U и N, используемых на печати.
@font-feature-values Athena Ruby { @character-variant { leo-B: 2 1; leo-M: 13 3; leo-alt-N: 14 1; leo-N: 14 2; leo-T: 20 1; leo-U: 21 2; leo-alt-U: 21 4; } } p { font-variant: discretionary-ligatures, character-variant(leo-B, leo-M, leo-N, leo-T, leo-U); } span.alt-N { font-variant-alternates: character-variant(leo-alt-N); } span.alt-U { font-variant-alternates: character-variant(leo-alt-U); } <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p> <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>
Название: | font-variant-east-asian |
Значение: | normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Позволяет управлять замещением глифа и изменением размеров в восточно-азиатских текстах.
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]
Отдельные значения имеют следующий смысл:
Различные JIS варианты отражают формы глифов определённые в различных японских национальных стандартах. Шрифты, как правило, включают глифы определённые самым последним национальным стандартом, но иногда необходимо использовать старые варианты, чтобы соответствовать вывеске, например.
‘simplified
’ и ‘traditional
’ значения позволяют контролировать формы глифов для символов, которые были упрощены с течением времени, но для которых старая, традиционная форма до сих пор используются в некоторых контекстах. Точный набор символов и форм глифов будет различаться в той или иной степени в зависимости от контекста, для которого данный шрифт был разработан.
Название: | font-variant |
Значение: | normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | смотрим отдельные свойства |
Медиа: | визуальный |
Вычисляемое значение: | смотрим отдельные свойства |
Анимируется: | смотрим отдельные свойства |
Свойство ‘font-variant
’ - это собирательное свойство для всех font-variant подсвойств. Значение ‘normal
’ сбрасывает все подсвойства ‘font-variant
’ до начальных значений. Значение ‘none
’ устанавливает свойству ‘font-variant-ligatures
’ значение none
и сбрасывает все другие функции свойств к их первоначальным значениям. Как и в случаях с другими сокращениями, использование ‘font-variant
’ сбрасывает неопределенные подсвойства ‘font-variant
’ к их изначальным значениям. Причём это не приводит к сбросу значений ‘font-language-override
’ или ‘font-feature-settings
’.
Название: | font-feature-settings |
Значение: | normal | <feature-tag-value> # |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствует |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Это свойство обеспечивает возможность низкоуровневого управления над функциями OpenType шрифтов. Оно задумано как способ обеспечения доступа к функциям шрифтов, которые широко не используется, но необходимы для конкретного случая использования.
Авторы обычно должны использовать ‘font-variant
’ и связанные с ним подсвойства всякий раз, когда это возможно, и только это свойство используется для особых случаев, когда его использование является единственным способом доступа к конкретной редко используемой функции шрифта.
/* включим капитель и используем второй swash вариант */ font-feature-settings: "smcp", "swsh" 2;
Значение ‘normal
’, означает, что никаких изменений в выборе глифа или позиционировании из-за этого свойства не происходит.
Тег значений функции имеет следующий синтаксис:
<feature-tag-value> = <строка> [ <число> | on | off ]?
<строка> является чувствительным к регистру тегом функции OpenType. Как указано в OpenType спецификации, теги функции содержат четыре ASCII символа. Теги string длиннее или короче четырех символов, или содержащие символы вне диапазона U+20–7E элементов кода являются недействительными. Теги функции должны соответствовать только тегу функции определённому в шрифте, поэтому они не ограничиваются явно зарегистрированными функциями OpenType. Шрифты, определяющие пользовательские теги функций должны следовать правилам названий тегов, которые определены в OpenType спецификации [OPENTYPE-FEATURES].
Теги функции не присутствующие в шрифтах игнорируются; браузер не должен пытаться перейти в резервный режим синтезирования на основании отсутствия этих тегов функции. Единственным исключением является то, что браузеры могут искусственно поддержать kern функцию со шрифтами, которые содержат кёрнинг данные в форме ‘kern
’ таблицы, но отсутствие kern функции поддерживается в ‘GPOS
’ таблице.
В целом, авторы должны использовать свойство ‘font-kerning
’, чтобы явно включить или отключить кёрнинг поскольку это свойство всегда влияет на шрифты с любым типом кёрнинг данных.
Если присутствует значение показывающее индекс, используемый для выбора глифа. Значение <число> должно быть больше или равняться 0. Значение 0 означает, что эта функция отключена. Для функций логического типа, значение 1 включает функцию. Для функций не логического типа, значение 1 или больше включает эту функцию и указывает выбранный для функции индекс. Значение ‘on
’ является синонимом 1 и значение ‘off
’ является синонимом 0. Если значение опущено, то предполагается, что используется значение 1.
font-feature-settings: "dlig" 1; /* dlig=1 включает лигатуры */ font-feature-settings: "smcp" on; /* smcp=1 включает капитель */ font-feature-settings: 'c2sc'; /* c2sc=1 включает прописные буквы для капители */ font-feature-settings: "liga" off; /* liga=0 отключает общие лигатуры */ font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 включает табличные цифры и исторические формы */ font-feature-settings: "tnum" "hist"; /* неправильно, должен быть список разделённый запятыми */ font-feature-settings: "silly" off; /* неправильно, тег слишком большой */ font-feature-settings: "PKRN"; /* PKRN=1 включает пользовательские функции */ font-feature-settings: dlig; /* неправильно, тег должен быть в виде строки */
Когда значения выходят за диапазон, поддерживаемый указанным шрифтом, то для данной ситуации действия явно не определены. Для функций логического типа, это будет поводом включить функцию. Для функций не логического типа, значения, лежащие вне диапазона значений, приравниваются к значению 0. Тем не менее, в обоих случаях точное поведение зависит от того, для чего предназначен шрифт (в частности, какой тип поиска используется для определения функции).
Хотя специально определены для OpenType тегов функции, теги функции для других современных форматов шрифтов, которые поддерживают функции шрифта, которые могут быть добавлены в будущем. По возможности, функции, определённые для других форматов шрифтов должны пытаться следовать образцу, зарегистрированных OpenType тегов.
Японский текст расположенный ниже будет отображён с половиной ширины канна символа.
body { font-feature-settings: "hwid"; /* OpenType функция Half-width */ }
<p>毎日カレー食べてるのに、飽きない</p>
Название: | font-language-override |
Значение: | normal | <строка> |
Значение по умолчанию: | normal |
Применяется: | ко всем элементам |
Наследование: | присутствия |
Проценты: | N/A |
Медиа: | визуальный |
Вычисляемое значение: | как указано |
Анимируется: | нет |
Как правило, авторы могут контролировать замещение и позиционирование используемого глифа исходя из особенностей языка путём установки языка содержимого элемента, как описано выше:
<!-- Отображение текста с помощью особенностей S'gaw Karen функции --> <p lang="ksw">...</p>
В некоторых случаях, авторы могут указать систему языка, отличающуюся от языка содержимого, например, в связи с необходимостью имитации типографских традиций другого языка. Свойство ‘font-language-override
’ позволяет авторам явно указать языковую систему шрифта и тем самым переопределить языковую систему, опирающуюся на язык содержимого.
Значения имеют следующий смысл:
Использование некорректных тегов системы языка OpenType не должно вызывать генерацию ошибки обработки, но такой тег должен игнорироваться при выполнении выбора и размещении глифа.
Всеобщая декларация прав человека была переведена на самые разнообразные языки. Статья 9 этого документа на турецком языке может быть размечена, как указано ниже:
<body lang="tr">
<h4>Madde 9</h4>
<p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>
В данной ситуации при визуализации текста браузер использует значение атрибута ‘lang
’ и соответственно отображает этот текст без ‘fi
’ лигатур. При этом нет необходимости использовать свойство ‘font-language-override
’.
Тем не менее, данный шрифт может не поддерживать определённый язык. В этой ситуации авторам, возможно, потребуется использовать типографические соглашения, связанные с языком, который поддерживается этим шрифтом:
<body lang="mk"> <!-- Македонский lang код -->
body { font-language-override: "SRB"; /* OpenType тег сербского языка */ }
<h4>Члeн 9</h4>
<p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
Македонский текст здесь будет отображаться с помощью сербского типографского соглашения, предполагая, что указанный шрифт, поддерживает сербский.
Как описано в предыдущем разделе, функции шрифта могут быть включены различными способами, либо через использование ‘font-variant
’ или ‘font-feature-settings
’ в правиле стиля, либо внутри правила @font-face
. Порядок резолюции для объединения этих настроек определён ниже. Функции, определённые с помощью свойств CSS, применяются в верхней части движка функций по умолчанию.
Для OpenType шрифтов, браузеры должны включить функции по умолчанию, определённые в OpenType документации для данной письменности и письменного режима. Обязательные лигатуры, общие лигатуры и контекстные формы должны быть включены по умолчанию (функции OpenType: rlig, liga, clig, calt), наряду с локализованными формами (функция OpenType: locl), и функции, необходимые для корректного отображения составных символов и знаков (функции OpenType: ccmp, mark, mkmk). Эти функции должны быть всегда включены, даже когда в качестве значения ‘font-variant
’ и ‘font-feature-settings
’ свойств выступает значение ‘normal
’. Отдельные функции отключены только тогда, когда явно переопределены автором, как когда ‘font-variant-ligatures
’ установлено значение ‘no-common-ligatures
’. Для обработки сложных письменностей, таких как арабская, монгольская или деванагари необходимы дополнительные функции. Для вертикально расположенного текста в вертикальных отрезках текста, должны быть включены вертикальные альтернативы (функция OpenType: vert).
Параметры свойства функции шрифта общих и конкретных шрифтов разрешаются в порядке, указанном ниже, то есть в порядке возрастания старшинства. Этот порядок используется для построения единого списка функций шрифта, которые влияют на данный отрезок текста.
@font-face
, то функции шрифта устанавливаются font-variant дескриптором в правиле @font-face
.@font-face
, то функции шрифта устанавливаются font-feature-settings дескриптором в правиле @font-face
.font-variant
’, связанного с подсвойствами ‘font-variant
’ и любым другим свойством CSS, которое использует OpenType функции (например, функцию ‘font-kerning
’).font-variant
’ или ‘font-feature-settings
’. Например, настройки значения по умолчанию свойства ‘letter-spacing
’ отключают обычные лигатуры.font-feature-settings
’.Этот порядок позволяет авторам создать общий набор параметров по умолчанию для шрифтов в пределах их правила @font-face
, затем переопределить их параметры свойств для конкретных элементов. Общие настройки свойств переопределяют настройки в правиле @font-face
и низкоуровневые настройки функции шрифта переопределяют настройки свойства ‘font-variant
’.
В ситуациях, когда объединённый список параметров функции шрифта содержит больше чем одно значение для одной функции, то используется последнее значение. Если шрифт не поддерживает определённую базовую функцию шрифта, то текст просто выводится так, как будто функция шрифта не была включена; не происходит подмены шрифта и не делается никаких попыток синтезировать функцию за исключением случаев, когда чётко определены конкретные свойства.
Со стилями ниже, числа выводятся пропорционально при использовании внутри абзаца, но внутри таблицы prices отображаются в табличной форме:
body { font-variant-numeric: proportional-nums; } table.prices td { font-variant-numeric: tabular-nums; }
Когда внутри правила font-variant используется @font-face
дескриптор, то это относится только к шрифту, определённому этим правилом.
@font-face { font-family: MainText; src: url(http://example.com/font.woff); font-variant: oldstyle-nums proportional-nums styleset(1,3); } body { font-family: MainText, Helvetica; } table.prices td { font-variant-numeric: tabular-nums; }
В этом случае, цифры старого стиля будут использованы повсюду, где будет применён шрифт "MainText". Так же, как и в предыдущем примере, табличные значения будут использоваться в таблицах prices с ‘tabular-nums
’ где оно появляется в общем правиле стиля и его использование является взаимоисключающим с ‘proportional-nums
’. Стилистические альтернативные наборы будут использоваться только там, где используется MainText.
Правило @font-face
также может использоваться для доступа к функции шрифта в локально доступных шрифтах через использование local()
в ‘src
’ дескрипторе @font-face
определения:
@font-face { font-family: BodyText; src: local("HiraMaruPro-W4"); font-variant: proportional-width; font-feature-settings: "ital"; /* латинский курсив в функции CJK текста */ } body { font-family: BodyText, serif; }
Если доступен японский шрифт "Hiragino Maru Gothic", то он будет использоваться. Когда происходит визуализация текста, японская канна будет расставляться пропорционально, а латинский текст будет выведен курсивом. Если текст будет выводится резервным serif шрифтом, то при визуализации будут использовать свойства по умолчанию.
В приведённом ниже примере, дополнительные лигатуры включены только для загружаемого шрифта, но отключены внутри span элементов с классом "special":
@font-face { font-family: main; src: url(fonts/ffmeta.woff) format("woff"); font-variant: discretionary-ligatures; } body { font-family: main, Helvetica; } span.special { font-variant-ligatures: no-discretionary-ligatures; }
Предположим, что кто-то добавляет правило с помощью ‘font-feature-settings
’, чтобы включить дополнительные лигатуры:
body { font-family: main, Helvetica; } span { font-feature-settings: "dlig"; } span.special { font-variant-ligatures: no-discretionary-ligatures; }
В этом случае, лигатуры будут выведены внутри span элементов с классом "special". Это происходит потому, что свойство ‘font-feature-settings
’ и ‘font-variant-ligatures
’ применяются только по отношению к этим span элементам. Даже несмотря на то, что установка ‘no-discretionary ligatures
’ для ‘font-variant-ligatures
’ эффективно отключает OpenType функцию dlig, так как ‘font-feature-settings
’ будет устранена после того, как значение ‘dlig
’ включит дополнительные лигатуры.
Содержимое правила @font-face
и @font-feature-values
может быть доступно через следующие расширения Объектной Модели CSS.
CSSFontFaceRule
Интерфейс CSSFontFaceRule представляет правило @font-face
.
interface CSSFontFaceRule : CSSRule { attribute DOMString family; attribute DOMString src; attribute DOMString style; attribute DOMString weight; attribute DOMString stretch; attribute DOMString unicodeRange; attribute DOMString variant; attribute DOMString featureSettings; }
DOM Level 2 Style спецификация [DOM-LEVEL-2-STYLE] определяет другой вариант этого правила. Это определение заменяет первое.
CSSFontFeatureValuesRule
Интерфейс CSSRule распространяется следующим образом:
partial interface CSSRule { const unsigned short FONT_FEATURE_VALUES_RULE = 14; }
Интерфейс CSSFontFeatureValuesRule представляет правило @font-feature-values
.
interface CSSFontFeatureValuesRule : CSSRule { attribute DOMString fontFamily; readonly attribute CSSFontFeatureValuesMap annotation; readonly attribute CSSFontFeatureValuesMap ornaments; readonly attribute CSSFontFeatureValuesMap stylistic; readonly attribute CSSFontFeatureValuesMap swash; readonly attribute CSSFontFeatureValuesMap characterVariant; readonly attribute CSSFontFeatureValuesMap styleset; } [MapClass(DOMString, sequence<unsigned long>)] interface CSSFontFeatureValuesMap { void set(DOMString featureValueName, (unsigned long or sequence<unsigned long>) values); }
DOMString
CSSFontFeatureValuesMap
отображающее тип, только для чтенияfont-variant-alternates
’Каждое значение отображаемое атрибутом CSSFontFeatureValuesRule
отражает значения определяемые с помощью соответствующего значения функции блока. Таким образом, атрибут annotation содержит значения, содержащиеся внутри значения функции блока @annotation
, атрибут ornaments содержит значения внутри значения функции блока @ornaments
и так далее.
Интерфейс CSSFontFeatureValuesMap
использует методы отображения классов по умолчанию, но метод set
включает различное поведение. Он принимает последовательность целых чисел без знака и связывает его с заданным featureValueName
. Метод работает так же, как метод отображения классов по умолчанию за исключением того, что одно беззнаковое длинное значение рассматривается как последовательность из одного значения. Метод генерирует исключение, если передаётся недопустимое число значений. Если присваиваемое значение функции блока допускает только ограниченное число значений, то метод set
выдаёт InvalidAccessError
исключение, когда входная последовательность set
содержит больше значений, чем ограниченное число значений. Смотрите описание определения значений многозначных функций для получения подробной информации о максимальном количестве допустимых значений для данного типа значения функции блока. Метод get
всегда возвращает последовательность значений, даже если последовательность содержит только одно значение.
Данное приложение занесено в качестве фона для некоторых проблем и ситуаций, которые описаны в других разделах. Приложение носит исключительно информативный характер.
Свойства шрифта в CSS разработаны для того, чтобы быть независимыми от основных используемых форматов шрифтов; они могут быть использованы для определения растровых шрифтов, Type1 шрифтов, SVG шрифтов в дополнение к общим TrueType и OpenType шрифтам. Но в TrueType и OpenType форматах есть аспекты, которые у авторов часто вызывают путаницу и на различных платформах представляют трудности для разработчиков.
Первоначально разработанный в Apple, формат TrueType был разработан как наброски формата шрифта, предназначенного как для экрана, так и для печати. Microsoft присоединилась к Apple, в разработке TrueType формата и с тех пор обе платформы поддерживают TrueType шрифты. Данные шрифтов в формате TrueType состоят из набора таблиц, которые отличаются общими четырьмя буквами названий тегов, каждый из которых содержит определённый тип данных. Например, сведения о названиях, в том числе об авторском праве и информации о лицензии, хранятся в таблице ‘name
’. Таблица символов (‘cmap
’) содержит отображение символов закодированных в глифы. Позже Apple, добавил дополнительные таблицы для поддержки расширенной типографской функциональности; теперь они называются Apple Advanced Typography или AAT шрифты. Microsoft и Adobe разрабатывает отдельный набор таблиц для продвинутой типографии, и называют этот формат OpenType [OPENTYPE].
Во многих случаях данные шрифта, используемые в Microsoft Windows или Linux немного отличаются от данных, используемых в Apple Mac OS X, так как формат TrueType может изменяться на разных платформах. Это включает в себя метрику шрифта, названия и данные таблицы символов.
В частности, данные названия шрифта на разных платформах обрабатываются по-разному. Для TrueType и OpenType шрифтов эти имена содержатся в ‘name
’ таблице, в записях названий с именем ID 1. Многие названия могут быть сохранены для разных локализаций, но Microsoft рекомендует всегда включать как минимум английскую версию названия шрифта. В Windows, Microsoft приняло решение для обеспечения обратной совместимости, ограничить названия шрифта максимум до четырёх версий; могут быть использованы для больших групп "предпочтительных шрифтов" (название - ID 16) или "WWS шрифтов" (название - ID 21). Другие платформы, такие как OSX не имеют такого ограничения, так название шрифта используется для определения всех возможных групп.
Другие названия таблицы данных содержит названия, используемые для уникальной идентификации конкретного варианта в шрифте. Полное название шрифта (название ID 4) и Постскриптум название (название ID 6) описывают один уникальный вариант. Например, жирная версия Gill Sans шрифта имеет полное название "Gill Sans Bold" и Постскриптум название "GillSans-Bold". Так же может быть несколько локализованных версий полного названия для данного варианта, но Постскриптум название является всегда уникальным названием, составленным из ограниченного набора ASCII символов.
На различных платформах, для поиска шрифта используются различные названия. Например, Windows GDI CreateIndirectFont API для поиска версии может использовать либо шрифт, либо полное название, в то время как Mac OS X CTFontCreateWithName API для поиска определённой версии использует полное название и Постскриптум название. В Linux, fontconfig API позволяет осуществлять поиск шрифтов с помощью любого из этих названий. В ситуациях, когда API платформа автоматически заменяет другие варианты шрифта, это может потребоваться для проверки возвращённого шрифта с соответствующим заданным названием.
Жирность данного варианта может быть определена с помощью usWeightClass поля OS/2 таблицы или определена исходя из вывода, сделанного на основании названия стиля (название ID 2). Точно так же, может быть определена и ширина с помощью usWidthClass в таблице OS/2 или исходя из вывода, сделанного на основании названия стиля. По историческим причинам, связанным с синтетическим изменением жирности, при жирности равной 200 или меньше в Windows GDI API, разработчики шрифтов иногда располагают искаженными значениями в таблице OS/2, чтобы избежать этой жирности.
Отображение сложных письменностей, которые используют контекстное формирование, таких как тайский, арабский и деванагари требует возможности, присутствующие только в шрифтах OpenType или AAT шрифтах. В настоящее время, визуализация сложных письменностей поддерживается на Windows, и Linux с помощью функции OpenType шрифта, в то время, как и OpenType и AAT функции шрифта используются в Mac OS X.
font-variant
’.auto
’ для ‘font-size-adjust
’.font-size-adjust
’ для ‘line-height
’.Я хотел бы поблагодарить Tal Leming, Jonathan Kew и Christopher Slye за их помощь и отзывы. John Hudson был достаточно любезен, выделив время, чтобы объяснить тонкости языка OpenType тегов и привёл пример вариантов символов используемых для отображения текста на византийских печатях. Ken Lunde и Eric Muller предоставили ценные комментарии на тему CJK OpenType функций и вариаций селекторов Unicode. Идея поддержки функции шрифта с помощью подсвойств ‘font-variant
’ возникла у Håkon Wium Lie, Adam Twardoch и Tal Leming. Elika Etemad предоставила некоторые из первоначальных дизайнерских идей для правила @font-feature-values
. Спасибо также House Industries, за разрешение использовать Ed блокировки в примере с дискреционными лигатурами.
Особая благодарность Robert Bringhurst за грандиозное расширение мысли, которое выражено в The Elements of Typographic Style.
Соответствие требованиям выражаются в сочетании описательных утверждений и RFC 2119 терминологии. Ключевые слова "ДОЛЖЕН", "НЕ ДОЛЖЕН", "ТРЕБУЕТСЯ", "ДОЛЖЕН", "НЕ", "ДОЛЖЕН", "НЕ СЛЕДУЕТ", "РЕКОМЕНДУЕТСЯ", "МОЖЕТ" и "ДОПОЛНИТЕЛЬНО" в нормативных частях этого документа должны быть интерпретированы, как описано в RFC 2119. Однако, для удобства чтения, в данной спецификации эти слова не пишутся в верхнем регистре.
Весь текст этой спецификации является нормативным за исключением разделов, помеченных как ненормативные, а так же помеченных как примеры и примечания. [RFC2119]
Примеры в данной спецификации обозначаются словами “например” или выводятся отдельно от нормативного текста class="example"
, примерно так:
Это пример информационного примера.
Информационные заметки начинаются со слова "Примечание" и выводятся отдельно от нормативного текста class="note"
, примерно так:
Заметим, что это информационная заметка.
Соответствие CSS Fonts Level 3 Module определяется для трех классов соответствия:
Таблица стилей является совместимой с CSS Fonts Level 3 Module, если все её объявления которые используют свойства, определенные в этом модуле, имеют значения, которые действуют в соответствии с общей CSS грамматикой и отдельной грамматикой каждого свойства, как приведено в этом модуле.
Визуализация является совместимой с CSS Fonts Level 3 Module, если в дополнение к интерпретации таблицы стилей, как определено в соответствующих спецификациях, он поддерживает все функции, определённые CSS Fonts Level 3 Module путём анализа их правильности и визуализации документа соответственно. Однако, неспособность браузера правильно отображать документ из-за ограничений устройств не делают браузер несоответствующим. (Например, от браузера не требуется отображать цвет на монохромном экране.)
Средство разработки является совместимым с CSS Fonts Level 3 Module, если он пишет таблицы стилей синтаксически правильно в соответствии с общей CSS грамматикой и отдельными грамматиками каждой функции в этом модуле, и выполняет все другие требования соответствия стилям, как описано в данном модуле.
Авторы могут использовать совместимые правила анализа для присвоения резервных значений, CSS визуализации должны рассматриваться в качестве недействительных (и игнорироваться при необходимости) в правилах, значениях свойств, ключевых словах и других синтаксических конструкциях, для которых они имеют не подходящий уровень поддержки. В частности, браузеры не должны избирательно игнорировать неподдерживаемые значения компонентов и выполнять поддерживаемые значения в одном объявлении многозначного свойства: если какое-либо значение считается недействительным (какими должны быть неподдерживаемые значения), то CSS требует, чтобы игнорировалось всё объявление.
Чтобы избежать конфликта с будущими функциями CSS, спецификация CSS2.1 оставляет префиксный синтаксис для собственных и экспериментальных CSS расширений.
До достижения спецификацией уровня Рекомендованной Кандидатуры в W3C процесс, все реализации CSS считаются экспериментальными. Рабочая Группа CSS рекомендует реализации использующие синтаксис с префиксами для таких функций, в том числе в Рабочих Проектах W3C. Это позволяет избежать несовместимости с будущими изменениями в проекте.
После того, как спецификация достигает этапа Рекомендованного Кандидата, становятся возможными не экспериментальные реализации, и разработчики должны выпустить реализацию любой функции CR-уровня без префикса, они могут продемонстрировать правильную реализацию в соответствии со спецификацией.
Для установления и поддержания совместимости CSS в разных реализациях, Рабочая Группа CSS заявляет о том, что представляет доклад о реализации не экспериментальной CSS визуализации (и, при необходимости, тестов, используемых для отчёта о реализации) W3C, прежде чем выпустить без префикса применение любой CSS функции. Тесты, представленные W3C, являются предметом проверки и корректировки рабочей группы CSS.
Дополнительную информацию по вопросам представленных тестов и отчётов об их выполнении, можно найти на сайте CSS Working Group http://www.w3.org/Style/CSS/Test/. Вопросы должны быть направлены на список рассылки public-css-testsuite@w3.org.
Удалить этот раздел, если/пока модуль находится в CR.
Для этой спецификации, которая будет расширена к Предлагаемой Рекомендации, должно быть, по крайней мере, по две независимые, совместимые реализации каждой функции. Каждая функция может быть реализована с помощью другого набора продуктов, так как нет требования, чтобы все функции были реализованы с помощью одного продукта. Для целей данного критерия мы определяем следующие термины:
Спецификация останется Рекомендованным Кандидатом на срок не менее шести месяцев.