ほんっとにはじめての HTML5 と CSS3

font-variant-east-asianプロパティは、日本や中国など東アジア圏（east-asian）のフォントのためのもの。漢字を旧字体にしたり、仮名だけ詰めたりできます。

これまでの font-variant関連のプロパティは 外国語フォント特有のものが多くて、あんまりピンと来ませんでしたが（笑）、今回の font-variant-east-asianプロパティは日本語で効果を発揮します！

1. font-variant-east-asianプロパティの値
2. font-variant-east-asianプロパティを使ってみよう
   1. font-variant-east-asian: jis78、jis83、jis90、jis04
   2. font-variant-east-asian: simplified
   3. font-variant-east-asian: traditional
   4. font-variant-east-asian: full-width
   5. font-variant-east-asian: proportional-width
   6. font-variant-east-asian: ruby

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant-east-asian - CSS | MDN

font-variant-east-asianプロパティの値

font-variant-east-asianプロパティの値
キーワード	normal：デフォルト値。通常の表示。 jis78、jis83、jis90、jis04、simplified、traditional、full-width、proportional-width、ruby
グローバル値	font-variant-east-asian: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant-east-asian: initial; 継承した親の値を解消しデフォルト値に戻す font-variant-east-asian: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

それぞれのキーワードは、以下の意味があります。
＊キーワードの後のブルーの（）内は OpenType機能タグ値（feature-tag-value）です。
（OpenType機能タグ値については、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください）

normal

通常の字形で表示。（HTML上に書いたままの字形で表示）

jis78（jp78）

JIS X 0208-1978（旧JIS）の字形で表示します。
JIS X 0208-1978 とは「文字集合」を規定する工業規格のひとつ。文字の1つひとつにJISコードがあります。JIS（Japanese Industrial Standards = 日本工業規格）によって定められています。

jis83（jp83）

JIS X 0208-1983（新JIS）の字形で表示します。

jis90（jp90）

JIS X 0208-1990 の字形で表示します。

jis04（jp04）

JIS X 0213-2004 の字形で表示します。

simplified（smpl）

中国語の簡体字の字形で表示します。

traditional（trad）

旧字体で表示します。

full-width（fwid）

等幅全角字形で表示します。英数字を全角の文字に置き換えて表示。

proportional-width（pwid）

可変幅の文字で表示する = カナを詰める。

ruby（ruby）

ルビ（ふりがな）の字形で表示する。

font-variant-east-asianプロパティを使ってみよう

OpenTypeフォントの機能を使用します。
OpenTypeフォントでも、フォントファミリーの中に 該当する字形が無い場合は、何も起こりません。

各キーワードを試してみます。フォントは Mac はヒラギノ、Win は游ゴシック で指定しました。（Chrome, Firefox は対応しているようです。2018年5月記）

font-variant-east-asian: jis78、jis83、jis90、jis04

JIS規格による字体の置き換えのサンプルです。
麹の麦にょう が違ったり、兎の下半分の足みたいな部位が、離れてるとか くっついてるとか、規格によって字体が違います。
地名・人名などの表記に役に立ちそうです。

Chrome、Firefox（Mac）では下のように表示されました。

サンプルのHTMLです（font-variant-east-asian はインラインで指定しています）
HTML上では、すべて同じ漢字をタイプしています。

<div class="mihon">
  <p style="font-variant-east-asian: normal">
    <span>(font-variant-east-asian: normal)</span>麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾</p>
  <p style="font-variant-east-asian: jis78">
    <span>(font-variant-east-asian: jis78)</span>麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾</p>
  <p style="font-variant-east-asian: jis83">
    <span>(font-variant-east-asian: jis83)</span>麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾</p>
  <p style="font-variant-east-asian: jis90">
    <span>(font-variant-east-asian: jis90)</span>麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾</p>
  <p style="font-variant-east-asian: jis04">
    <span>(font-variant-east-asian: jis04)</span>麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾</p>
</div>

サンプルのCSSです。

.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 1.5em
	}
.mihon p {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','Yu Gothic', '游ゴシック',sans-serif;
	font-weight: 400;
	margin:15px 0;
	font-size:2.5rem;
	line-height:1.2
	}
.mihon p span {
	font-size:15px;
	color:#579961;
	display:block;
	margin:.2em 0;
	font-variant-east-asian: normal
    }

font-variant-east-asian: simplified

中国語・日本語の漢字を、中国語の簡体字の字形に置き換えます。

Chrom, Firefox（いずれもMac版）で見ると、フォントファリミーに字体が含まれていても置き換えないようです。下の段は「广 习 业 开 丽」と表示して欲しいんですけどね。

サンプルのHTMLです（font-variant-east-asian とフォントファミリーはインラインで指定しています）

<div class="mihon" style="font-family:'Microsoft Yahei','PingHei',sans-serif;" lang="zh-tw" xml:lang="zh-tw">
  <p style="font-variant-east-asian: normal">
    <span>(font-variant-east-asian: normal)</span>広 習 業 開 麗</p>
  <p style="font-variant-east-asian: simplified">
    <span>(font-variant-east-asian: simplified)</span>広 習 業 開 麗</p>
</div>

font-variant-east-asian: traditional

中国語簡体字・日本語の漢字を、対応する旧字体に置き換えます。

Chrome、Firefox（Mac）では下のように表示されました。

サンプルのHTMLです（font-variant-east-asian はインラインで指定しています）

<div class="mihon">
  <p style="font-variant-east-asian: normal">
    <span>(font-variant-east-asian: normal)</span>広 学 県庁 台湾 会社</p>
  <p style="font-variant-east-asian: traditional">
    <span>(font-variant-east-asian: traditional)</span>広 学 県庁 台湾 会社</p>
</div>

font-variant-east-asian: full-width

「等幅全角字形」に置き換えます。
英数字の「スペースも含んだ字体の領域」を「全角」にします。

Chrome、Firefox（Mac）では下のように表示されました。

サンプルのHTMLです（font-variant-east-asian はインラインで指定しています）

<div class="mihon">
  <p style="font-variant-east-asian: normal">
    <span>(font-variant-east-asian: normal)</span>3月12日 Monday</p>
  <p style="font-variant-east-asian: full-width">
    <span>(font-variant-east-asian: full-width)</span>3月12日 Monday</p>
</div>

font-variant-east-asian: proportional-width

「カナ詰め」にします。「プロポーショナルな字形」に置き換える機能です。

日本語の文字は「均等な幅」の字体のセットが標準ですが、OpenTypeフォントなら、プロポーショナルな（「スペースも含んだ字体の領域」を字体のプロポーションに合わせて 配置しやすくした）字形に置き換えることもできます。
で、日本語フォントでは結果的に「カナ」が詰められた表示になります。
ラテン文字でも使えます。

メイリオの日本語字体にはプロポーショナルな字体は含まれてないそうです（=カナ詰め不可）。
サンプルのフォントは、Mac はヒラギノ・Win は 游ゴシック で指定しています。

Firefox（Mac）では下のように表示されました。句読点は詰まらないんですね。

サンプルのHTMLです（font-variant-east-asian はインラインで指定しています）

<div class="mihon">
  <p style="font-variant-east-asian: normal">
    <span>(font-variant-east-asian: normal)</span>文字詰めできると便利ですね。</p>
  <p style="font-variant-east-asian: proportional-width">
    <span>(font-variant-east-asian: proportional-width)</span>文字詰めできると便利ですね。</p>
</div>

font-variant-east-asian: ruby

これは「ルビ用の字体」に置き換えるだけ。サイズや位置などは変わりません。
下のサンプルでは、カナだけ太めになっています。

HTML の <ruby>要素を使って、<rt>要素（ルビのテキスト）に font-variant-east-asian: ruby を指定してみました。

Chrome、Firefox（Mac）では下のように表示されました。
font-variant-east-asian: ruby を指定したほうが若干太めの字体になってます。

サンプルのHTMLです。

<div class="mihon">
  <p class="f-nomal">
    <span>(font-variant-east-asian: normal)</span>
    <ruby>日本<rt>にっぽん</rt></ruby>の<ruby>文字<rt>もじ</rt></ruby></p>
  <p class="f-ruby">
    <span>(font-variant-east-asian: ruby)</span>
    <ruby>日本<rt>にっぽん</rt></ruby>の<ruby>文字<rt>もじ</rt></ruby></p>
</div>

サンプルのCSSです。

.f-nomal rt {font-variant-east-asian: normal}
.f-ruby rt {font-variant-east-asian: ruby}

次回予告

次回は、ショートハンドプロパティfont-variantプロパティを使おう。
これまで見てきた複数の font-variant 関係のプロパティの値を、まとめて指定することができます。

関連記事

• 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
• 【35】改行の禁則処理を解除するか決める word-breakプロパティ
• 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
• 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
• 【32】インラインの縦方向の整列を決める vertical-alignプロパティ
• 【31】OpenType機能を直接指定できる font-feature-settings
• 【30-7】ショートハンドプロパティになった font-variant
• 【30-6】漢字や仮名のための font-variant-east-asian
• 【30-5】文字の代替えを指定する font-variant-alternates
• 【30-4】数字の表示方法を指定する font-variant-numeric
• 【30-3】リガチャ（合字）を指定する font-variant-ligatures
• 【30-2】上付き・下付き文字を指定する font-variant-position
• 【30-1】スモールキャップなどを指定する font-variant-caps
• 【29】文字間を自動調整してくれる font-kerningプロパティ
• 【28】ボールドやイタリックを合成するか決める font-synthesis