---
title: font-variant-east-asian
slug: Web/CSS/font-variant-east-asian
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - NeedsLiveSample
  - Reference
  - 'recipe:css-property'
  - 日本語処理
translation_of: Web/CSS/font-variant-east-asian
---
<div>{{CSSRef}}</div>

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

<pre class="brush:css no-line-numbers notranslate">font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78;              /* &lt;east-asian-variant-values&gt; */
font-variant-east-asian: jis83;              /* &lt;east-asian-variant-values&gt; */
font-variant-east-asian: jis90;              /* &lt;east-asian-variant-values&gt; */
font-variant-east-asian: jis04;              /* &lt;east-asian-variant-values&gt; */
font-variant-east-asian: simplified;         /* &lt;east-asian-variant-values&gt; */
font-variant-east-asian: traditional;        /* &lt;east-asian-variant-values&gt; */
font-variant-east-asian: full-width;         /* &lt;east-asian-width-values&gt; */
font-variant-east-asian: proportional-width; /* &lt;east-asian-width-values&gt; */
font-variant-east-asian: ruby full-width jis83;

/* グローバル値 */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: unset;
</pre>

<h2 id="Syntax" name="Syntax">構文</h2>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>このキーワードは、別形式の表記の使用を無効にします。</dd>
 <dt><code>ruby</code></dt>
 <dd>このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の <code>ruby</code> の値に対応します。</dd>
 <dt><code>&lt;east-asian-variant-values&gt;</code></dt>
 <dd>これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。
 <table class="standard-table">
  <tbody>
   <tr>
    <th>キーワード</th>
    <th>標準による形状の定義</th>
    <th>OpenType の対応</th>
   </tr>
   <tr>
    <td><code>jis78</code></td>
    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第1次規格">JIS X 0208:1978</a></td>
    <td><code>jp78</code></td>
   </tr>
   <tr>
    <td><code>jis83</code></td>
    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第2次規格">JIS X 0208:1983</a></td>
    <td><code>jp83</code></td>
   </tr>
   <tr>
    <td><code>jis90</code></td>
    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第3次規格">JIS X 0208:1990</a></td>
    <td><code>jp90</code></td>
   </tr>
   <tr>
    <td><code>jis04</code></td>
    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0213">JIS X 0213:2004</a></td>
    <td><code>jp04</code></td>
   </tr>
   <tr>
    <td><code>simplified</code></td>
    <td>なし。簡体字中国語の字形を使用</td>
    <td><code>smpl</code></td>
   </tr>
   <tr>
    <td><code>traditional</code></td>
    <td>なし。繁体字中国語の字形を使用</td>
    <td><code>trad</code></td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>&lt;east-asian-width-values&gt;</code></dt>
 <dd>これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。
 <ul>
  <li><code>proportional-width</code> は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の <code>pwid</code> の値に対応します。</li>
  <li><code>full-width</code> は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の <code>fwid</code> に対応します。</li>
 </ul>
 </dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Setting_East_Asian_glyph_variants" name="Setting_East_Asian_glyph_variants">東アジアの字形の変化形を設定</h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;table&gt;
&lt;thead&gt;&lt;/thead&gt;
&lt;tbody style="border:0;"&gt;
  &lt;tr&gt;
    &lt;th&gt;normal/jis78:&lt;/th&gt;
    &lt;td&gt;麹町&lt;/td&gt;
    &lt;td class="jis78"&gt;麹町&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;normal/ruby:&lt;/th&gt;
    &lt;td&gt;しんかんせん&lt;/td&gt;
    &lt;td class="ruby"&gt;しんかんせん&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;normal/traditional:&lt;/th&gt;
    &lt;td&gt;大学&lt;/td&gt;
    &lt;td class="traditional"&gt;大学&lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush:css notranslate">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;
}

</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>仕様書</th>
   <th>状況</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.font-variant-east-asian")}}</p>