font-variant-east-asian

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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;
}

構文

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;

/* グローバル値 */
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>

これらの値は東アジアの文字の大きさを制御します。2 つの値が利用できます。

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

例

東アジアの字形の変化形を設定

この例は OS に「游ゴシック」フォントがインストールされていることが必要です。ほかのフォントでは OpenType 機能に対応していない可能性があります。

HTML

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

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;
}

結果

仕様書

Specification
CSS Fonts Module Level 4 # font-variant-east-asian-prop