CSS свойство font-variant-east-asian
CSS свойство font-variant-east-asian управляет заменой и размером глифов для восточноазиатских письменностей. Значения и примеры.
CSS-свойство font-variant-east-asian управляет использованием альтернативных глифов для восточноазиатских письменностей — китайской, японской и корейской (CJK). Оно позволяет выбирать между историческими или региональными формами символов (например, традиционный и упрощённый китайский, либо различные японские стандарты JIS) и управлять шириной цифр — без изменения исходного текста.
Это одно из свойств CSS3 и одно из подсвойств, составляющих сокращённое свойство font-variant.
Зачем это нужно
Одна кодовая точка Unicode может отображаться несколькими разными глифами в восточноазиатской типографике. Один и тот же символ может иметь историческую (традиционную) форму и современную (упрощённую) форму, а японские шрифты нередко содержат глифы, соответствующие конкретному стандарту JIS (jis78, jis83, jis90, jis04). font-variant-east-asian указывает шрифту выбрать подходящий вариант из его возможностей OpenType, сохраняя оригинальные символы в разметке и отображая нужную форму.
Используйте это свойство, когда:
- Вы отображаете китайский текст и хотите принудительно использовать традиционные или упрощённые формы независимо от того, какие символы ввёл автор.
- Вы ориентируетесь на конкретный японский стандарт глифов JIS для единообразия.
- Вы смешиваете CJK с латинским текстом и вам нужны цифры полной ширины или пропорциональной ширины, чтобы столбцы выравнивались.
- Вы отображаете аннотированный текст и хотите использовать меньшие формы глифов ruby.
Поскольку это свойство опирается на возможности шрифта, видимый эффект проявляется только тогда, когда активный шрифт действительно содержит эти альтернативные глифы. Если шрифт не имеет традиционного варианта, текст отображается без изменений.
| Начальное значение | normal |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.fontVariantEastAsian = "ruby"; |
Синтаксис
Синтаксис CSS-свойства font-variant-east-asian
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Пример свойства font-variant-east-asian:
Пример CSS-свойства font-variant-east-asian со значением traditional
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-variant-east-asian: traditional;
}
</style>
</head>
<body>
<h2>Font-variant-east-asian property example</h2>
<h2>大学 → 大學</h2>
</body>
</html>Здесь видно, что свойство font-variant-east-asian установлено в значение traditional. Его можно изменить на любое из значений, указанных в таблице ниже на этой странице, включая вариант simplified. Примечание: поддержка этого свойства браузерами ограничена. Пример опирается на системные шрифты, содержащие традиционные восточноазиатские варианты.
Результат
![CSS свойство font-variant-east-asian](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "CSS свойство font-variant-east-asian" =420x)
Совмещение значений ширины и варианта
Можно одновременно задать одно значение варианта и одно значение ширины. Ключевые слова можно указывать в любом порядке:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cjk {
font-variant-east-asian: simplified full-width;
}
</style>
</head>
<body>
<p class="cjk">図書館 1234</p>
</body>
</html>Здесь simplified выбирает упрощённый вариант глифа, а full-width принудительно применяет формы полной ширины для цифр, чтобы они занимали ту же ширину ячейки, что и окружающие символы CJK.
Значения
| Значение | Описание |
|---|---|
| normal | Использование альтернативных глифов не включено. |
<east-asian-variant-values> | Выбирает вариант логографического глифа. Одно из значений: jis78, jis83, jis90, jis04, simplified или traditional. |
<east-asian-width-values> | Управляет размером цифр, используемых для восточноазиатских символов: proportional-width (пропорциональные интервалы) или full-width (формы полной ширины). |
| ruby | Принудительно использует специальные, уменьшенные глифы, предназначенные для символов ruby (аннотаций). |
| initial | Устанавливает для свойства его значение по умолчанию (normal). |
| inherit | Наследует свойство от родительского элемента. |
Допустимое значение объединяет не более одного ключевого слова варианта и одного ключевого слова ширины (например, jis90 full-width), либо единственные ключевые слова normal или ruby.
Связанные свойства
font-variant— сокращённое свойство, включающее это подсвойство.font-feature-settings— низкоуровневое управление теми же возможностями OpenType.font-family— выбор шрифта, который фактически содержит варианты восточноазиатских глифов.