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

font-variant-east-asianプロパティに指定できる値

font-variant-east-asianプロパティはOpenType特性に則って大文字と小文字が混在するテキストを表示するために、次の値を設定することができます。

以降はfont-variant-east-asianプロパティを使用するコード例とブラウザの表示例を紹介します。

使用例1

「游ゴシック」のフォントを使い、font-variant-east-asianプロパティに「normal」、「traditional」、「simplified」を指定した例です。
コードの赤いの箇所がfont-variant-east-asianプロパティの指定と、適用するテキストになります。

CSS コード例

.sample1 section {
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.sample1 section.first {
  border-top: 1px solid #ccc;
}
.sample1 section h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample1 p {
  font-family: "游ゴシック", YuGothic,  "Yu Gothic", sans-serif;
  font-size: 40px;
}
.sample1 .text1 {
  font-variant-east-asian: normal;
}
.sample1 .text2 {
  font-variant-east-asian: traditional;
}
.sample1 .text3 {
  font-variant-east-asian: simplified;
}

HTML コード例

<div class="sample1">
  <section class="first">
    <h2>font-variant-east-asian: normal;</h2>
    <p class="text1">斉藤 渡辺 国 一万円</p>
  </section>
  <section>
    <h2>font-variant-east-asian: traditional;</h2>
    <p class="text2">斉藤 渡辺 国 一万円</p>
  </section>
  <section>
    <h2>font-variant-east-asian: simplified;</h2>
    <p class="text3">斉藤 渡辺 国 一万円</p>
  </section>
</div>

以下はブラウザ（Chrome）での表示例です。

font-variant-east-asianプロパティに「normal」と「simplified」には表示に違いはありませんが、「traditional」は漢字の表記が全く異なることが分かります。
使用するフォントが対応することが条件になりますが、このような表記の違いをCSSの指定で切り替えることができます。

使用例2

フォントは使用例1と同様に「游ゴシック」のまま、font-variant-east-asianプロパティにJISの字形を指定したコード例とブラウザの表示例になります。
コードの赤いの箇所がfont-variant-east-asianプロパティの指定と、適用するテキストになります。

CSS コード例

.sample2 section {
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.sample2 section.first {
  border-top: 1px solid #ccc;
}
.sample2 section h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample2 p {
  font-family: "游ゴシック", YuGothic,  "Yu Gothic", sans-serif;
  font-size: 40px;
}
.sample2 .text1 {
  font-variant-east-asian: normal;
}
.sample2 .text2 {
  font-variant-east-asian: jis78;
}
.sample2 .text3 {
  font-variant-east-asian: jis83;
}
.sample2 .text4 {
  font-variant-east-asian: jis90;
}
.sample2 .text5 {
  font-variant-east-asian: jis04;
}

HTML コード例

<div class="sample2">
  <section class="first">
    <h2>font-variant-east-asian: normal;</h2>
    <p class="text1">鯵 壷 篭</p>
  </section>
  <section>
    <h2>font-variant-east-asian: jis78;</h2>
    <p class="text2">鯵 壷 篭</p>
  </section>
  <section>
    <h2>font-variant-east-asian: jis83;</h2>
    <p class="text3">鯵 壷 篭</p>
  </section>
  <section>
    <h2>font-variant-east-asian: jis90;</h2>
    <p class="text2">鯵 壷 篭</p>
  </section>
  <section>
    <h2>font-variant-east-asian: jis04;</h2>
    <p class="text3">鯵 壷 篭</p>
  </section>
</div>

font-variant-east-asianプロパティに「jis78」を指定したとき、漢字の字形が大きく異なることが分かります。
今回の漢字ではそれ以外の値を指定したときに表示の差異はありませんが、必要に応じてJISの字形を指定して表示させることが出来るようになっています。