font-variant-east-asian

Базовая линия Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

Попробуйте

Синтаксис

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

Это ключевое слово принудительно использует специальные глифы для символов руби. Поскольку они обычно меньше, разработчики шрифтов часто разрабатывают специальные формы, обычно немного более жирные, чтобы улучшить контраст. Это ключевое слово соответствует значениям 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.

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

Начальное значение	`normal`
Применимо к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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 style="border:0;">
    <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

td {
  font-family: "Yu Gothic";
  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;
}

Результат

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

Спецификация
CSS Fonts Module Level 4 # font-variant-east-asian-prop

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

	Стационарные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-variant-east-asian`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`full-width`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`jis04`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`jis78`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`jis83`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`jis90`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`normal`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`proportional-width`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`ruby`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`simplified`	63	79	34	50	9.1	63	34	46	9.3	8.0	63
`traditional`	63	79	34	50	9.1	63	34	46	9.3	8.0	63

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian