font-variant-east-asian CSS3

font-variant-east-asian は、テキストの表示形式を指定します。

名前:font-variant-east-asian
: normal |
[<east-asian-variant-values>=[ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
||<east-asian-width-values>=[ full-width | proportional-width ]
||ruby
]
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:as specified(指定通り)
アニメーション:できない

Value(値)

normal
初期値 標準
jis78
JIS78形の表示を有効にする。(OpenType機能:jp78)
jis83
JIS83形の表示を有効にする。(OpenType機能:jp83)
jis90
JIS90形の表示を有効にする。(OpenType機能:jp90)
jis04
JIS2004形の表示を有効にする。(OpenType機能:jp04)
simplified
簡略化した形の表示を有効にする。(OpenType機能:smpl)
traditional
伝統的(旧)な形の表示を有効にする。(OpenType機能:trad)
full-width
等幅全角グリフの表示を有効にする。(OpenType機能:fwid)
proportional-width
プロポーショナル(可変幅)グリフの表示を有効にする。(OpenType機能:pwid)
ruby
ルビ用グリフの表示を有効にする。(OpenType機能:ruby)

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1, .test7, .test8, .test9 { font-family: 'Kozuka Mincho Pr6n'; font-size: 24pt; }
   span.test2, .test3, .test4, .test5 { font-family: 'Kozuka Mincho Pr6n'; font-size: 24pt; }
   p.test6 { font-family: SimSun, 'Microsoft YaHei'; font-size: 24pt; }
   p.test10 { font-size: 24pt; }
   p.test1 { font-variant-east-asian: normal; }
   span.test2 { font-variant-east-asian: jis78; }
   span.test3 { font-variant-east-asian: jis83; }
   span.test4 { font-variant-east-asian: jis90; }
   span.test5 { font-variant-east-asian: jis04; }
   p.test6 { font-variant-east-asian: simplified; }
   p.test7 { font-variant-east-asian: traditional; }
   p.test8 { font-variant-east-asian: full-width; }
   p.test9 { font-variant-east-asian: proportional-width; }
   p.test10 { font-variant-east-asian: ruby; }
  </style>
 </head>
 <body>
   <p class="test1">厩</p>
   <p>
   <span class="test2">厩</span>
   <span class="test3">厩</span>
   <span class="test4">厩</span>
   <span class="test5">厩</span>
   </p>
   <p class="test6">写</p>
   <p class="test7">大学</p>
   <p class="test8">私は12歳です</p>
   <p class="test9">じゃむ</p>
   <p class="test10"><ruby>新幹線<rt>しんかんせん</rt></ruby></p>
 </body>
</html>

display

* 通常 *

* JIS78、JIS83、JIS90、JIS04 *

* 簡略化 *

大学* 伝統的 *

私は12歳です* 等幅 *

私は12歳です(指定なし)

じゃむ* 可変幅 *

じゃむ(指定なし)

新幹線しんかんせん* ルビ *

新幹線しんかんせん(指定なし/ 相違点:太さ)

※ Google Chrome 64.0.3282.186、Firefox58.0.2にて表示確認(2018/3/8)

上に戻る