リファレンス

font-variant-capsプロパティの使い方・サンプルコード

Sara

font-variant-caps

font-variant-capsプロパティは、小文字のアルファベットを「サイズを小さくした大文字」にすることができます。

フォントが OpenType 値に対応していない場合は合成して生成されます。

デモ:font-variantプロパティ

* 表示形式はブラウザによって異なります。

使用できる値

セレクタ {
  font-variant-caps: ここに値を指定;
}
normal(初期値)標準の形で表示する
small-caps小文字アルファベットを、大文字を小さくした形で表示する
all-small-caps大文字と小文字の両方を、大文字を小さくした形で表示する
petite-caps小文字アルファベットを、petite capital(小さな大文字)で表示する
all-petite-caps大文字と小文字の両方を、petite capital(小さな大文字)で表示する
unicasesmall capital(大文字を小さくした形)と通常の小文字の混合表示を有効にする
titling-capsタイトルキャピタルの表示を有効にする

使用例

HTML

<p class="normal">ABCdef</p>
<p class="small-caps">ABCdef</p>
<p class="all-small-caps">ABCdef</p>

CSS

.normal {
  font-variant-caps: normal;
}
.small-caps {
  font-variant-caps: small-caps;
}
.all-small-caps {
  font-variant-caps: all-small-caps;
}

実行結果

対応ブラウザ

関連するHTML要素

HTML タグ一覧はこちら

関連するCSSプロパティ

CSS プロパティ一覧はこちら

guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
0
この記事にコメントするx
記事URLをコピーしました