CSS - font-variant-caps

概要

属性名 font-variant-caps
値 normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
初期値normal
適用可能要素すべての要素
継承継承する
メディアVisual
サポートC3 / Fx34

説明

文字の大文字・小文字などの表示を制御します。

値説明
normal通常表示します。
small-caps小文字を小さな大文字で表示します。
all-small-caps全ての英字を小さな大文字で表示します。
petite-caps小文字を small caps よりも小さな大文字で表示します。
all-petite-caps全ての英字を small caps よりも小さな大文字で表示します。
unicase大文字・小文字の区別の無い文字セットで表示します。実際には、小さな大文字と通常の小文字を組合して表示します。L や H は大文字、a や e は小文字にするなど、規則があるようです。
titling-capsタイトル(題字)向けの表記で表示します。

使用例

HTML
<div style="font-family:'Helvetica'; font-size:16pt;">
 <div style="font-variant-caps:normal">Hello World! ... normal</div>
 <div style="font-variant-caps:small-caps">Hello World! ... small-caps</div>
 <div style="font-variant-caps:all-small-caps">Hello World! ... all-small-caps</div>
 <div style="font-variant-caps:petite-caps">Hello World! ... petite-caps</div>
 <div style="font-variant-caps:all-petite-caps">Hello World! ... all-petite-caps</div>
 <div style="font-variant-caps:unicase">Hello World! ... unicase</div>
 <div style="font-variant-caps:titling-caps">Hello World! ... titling-caps</div>
</div>
表示
Hello World! ... normal
Hello World! ... small-caps
Hello World! ... all-small-caps
Hello World! ... petite-caps
Hello World! ... all-petite-caps
Hello World! ... unicase
Hello World! ... titling-caps

関連項目

font-variant, font-feature-settings

リンク

Copyright (C) 2015 杜甫々
初版：2015年11月15日、最終更新：2015年11月15日
https://www.tohoho-web.com/css/prop/font-variant-caps.htm