【30-6】漢字や仮名のための font-variant-east-asian

最終更新日:2018年05月30日  (初回投稿日:2018年05月22日)

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

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

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

(font-variant-east-asian: normal)麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾

(font-variant-east-asian: jis78)麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾

(font-variant-east-asian: jis83)麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾

(font-variant-east-asian: jis90)麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾

(font-variant-east-asian: jis04)麹 兎 餌 僅 芦 楢 葛 牙 瀞 籾

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版)で見ると、フォントファリミーに字体が含まれていても置き換えないようです。下の段は「广 习 业 开 丽」と表示して欲しいんですけどね。

(font-variant-east-asian: normal)広 習 業 開 麗

(font-variant-east-asian: simplified)広 習 業 開 麗

サンプルの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

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

(font-variant-east-asian: normal)広 学 県庁 台湾 会社

(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

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

(font-variant-east-asian: normal)3月12日 Monday

(font-variant-east-asian: full-width)3月12日 Monday

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 は 游ゴシック で指定しています。

(font-variant-east-asian: normal)文字詰めって、便利ですね。

(font-variant-east-asian: proportional-width)文字詰めって、便利ですね。

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

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

(font-variant-east-asian: normal)ルビのための字体。ruby

(font-variant-east-asian: ruby)ルビのための字体。ruby

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

(font-variant-east-asian: normal) 日本にっぽん文字もじ

(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 関係のプロパティの値を、まとめて指定することができます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2018/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.