CSS-свойство `font-variant-east-asian`

CSS-свойство font-variant-east-asian CSS управляет использованием альтернативных глифов для восточноазиатских письменностей, например японской и китайской.

Попробуйте

font-variant-east-asian: normal;

font-variant-east-asian: ruby;

font-variant-east-asian: jis78;

font-variant-east-asian: proportional-width;

<section id="default-example">
  <div id="example-element">
    <p>
      JIS78とJIS83以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。
    </p>
  </div>
</section>

section {
  font-family:
    "YuGothic Medium", "YuGothic", "Yu Gothic Medium", "Yu Gothic", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

Синтаксис

font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78; /* <east-asian-variant-values> */
font-variant-east-asian: jis83; /* <east-asian-variant-values> */
font-variant-east-asian: jis90; /* <east-asian-variant-values> */
font-variant-east-asian: jis04; /* <east-asian-variant-values> */
font-variant-east-asian: simplified; /* <east-asian-variant-values> */
font-variant-east-asian: traditional; /* <east-asian-variant-values> */
font-variant-east-asian: full-width; /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
font-variant-east-asian: ruby full-width jis83;

/* Global values */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: revert;
font-variant-east-asian: revert-layer;
font-variant-east-asian: unset;

Значения

Это свойство задаётся либо как normal или ruby, либо как список следующих значений, разделённых пробелами:

normal

Это ключевое слово отключает использование таких альтернативных глифов.

ruby

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

<east-asian-variant-values>

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

Ключевое слово	Стандарт, определяющий глифы	Эквивалент OpenType
jis78	JIS X 0208:1978	jp78
jis83	JIS X 0208:1983	jp83
jis90	JIS X 0208:1990	jp90
jis04	JIS X 0213:2004	jp04
simplified	Нет, использовать глифы упрощённого китайского письма	smpl
traditional	Нет, использовать глифы традиционного китайского письма	trad

<east-asian-width-values>

Эти значения управляют размером цифр, используемых для восточноазиатских символов. Возможны два значения:

• proportional-width включает набор восточноазиатских символов с различной шириной. Соответствует значениям OpenType pwid.
• full-width включает набор восточноазиатских символов с одинаковой, примерно квадратной шириной. Соответствует значениям OpenType fwid.

Формальное определение

Формальный синтаксис

font-variant-east-asian = 
  normal |
  [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

<east-asian-variant-values> = 
  [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]

<east-asian-width-values> = 
  [ full-width | proportional-width ]

Примеры

Задание вариантов восточноазиатских глифов

Для этого примера в вашей операционной системе должен быть установлен шрифт «Yu Gothic»; другие шрифты могут не поддерживать функции OpenType.

HTML

<table>
  <thead></thead>
  <tbody>
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>

CSS

tbody {
  border: 0;
}

td {
  font-family: "Yu Gothic", fantasy;
  font-size: 20px;
}
th {
  color: grey;
  padding-right: 10px;
}

.ruby {
  font-variant-east-asian: ruby;
}

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional {
  font-variant-east-asian: traditional;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position