font-variant-east-asian

CSS の font-variant-numeric プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。

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: 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 and ::first-line にも適用されます。
継承あり
計算値指定値
アニメーションの種類個別

形式文法

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

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

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

この例は OS に「游ゴシック」フォントがインストールされていることが必要で、ほかのフォントでは 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 3
font-variant-east-asian の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-variant-east-asianChrome 完全対応 63Edge 完全対応 79Firefox 完全対応 34
完全対応 34
未対応 24 — 34
無効
無効 From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 63Chrome Android 完全対応 63Firefox Android 完全対応 34
完全対応 34
未対応 24 — 34
無効
無効 From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。