font-variant-caps:文字列に適用されるキャピタライゼーションルールを制御する
初期値 | normal |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
font-variant-capsプロパティの説明
font-variant-caps
は、文字列に適用されるキャピタライゼーションルールを制御します。文字列に適用されているfont-family
に異なる大きさの大文字体が含まれている場合に、このプロパティで最適なものを選ぶように指定できます。
英文にはキャピタライゼーションルール(capitalization rules)というものがあり、本プロパティはそれに関する機能を制御するものです。
font-variant-capsに指定できる値
- normal
- 代替字体の使用を無効にします。これが初期値です。
- small-caps
- 小文字をスモールキャップの字体で表示します。一般的にスモールキャピタルの字体は小文字の大きさに縮小された大文字です。OpenTypeの
smcp
に相当します。 - all-small-caps
- 大文字と小文字の両方にスモールキャップの表示を有効にします。OpenTypeの
c2sc
およびsmcp
に相当します。 - petite-caps
- 小文字をプチキャップの字体で表示します。プチキャップは一部のフォントに含まれる字体で、
x-height
を基準にした高さでスモールキャップと異なります。OpenTypeのpcap
に相当します。 - all-petite-caps
- 大文字と小文字の両方にプチキャップの表示を有効にします。OpenTypeの
c2pc
およびpcap
に相当します。 - unicase
- 大文字のスモールキャップと通常の小文字を混合して表示することを有効にします。OpenTypeの
unic
に相当します。 - titling-caps
- タイトルキャップの表示を有効にします。タイトルキャピタルは、大文字で全てを表記する見出しなどに最適化された専用の字体です。
font-variant-capsの使い方とサンプル
font-variant-caps
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
/* グローバル値 */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: unset;
font-variant-capsの実例
それでは実際にfont-variant-caps
プロパティの書き方を見ていきましょう。以下の例は、英文のテキストに個別のキャピタライゼーションルールを適用した時の比較です。
表示確認
CSS
.samp_box {
overflow: auto;
width: 100%;
margin-top: 1rem;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
.fvc_norm {
font-variant-caps: normal;
}
.fvc_sc {
font-variant-caps: small-caps;
}
.fvc_asc {
font-variant-caps: all-small-caps;
}
.fvc_pc {
font-variant-caps: petite-caps;
}
.fvc_apc {
font-variant-caps: all-petite-caps;
}
.fvc_uni {
font-variant-caps: unicase;
}
.fvc_tc {
font-variant-caps: titling-caps;
}
HTML
<section class="samp_box">
<h2>font-variant-caps:大文字小文字混合</h2>
<p class="fvc_norm">This paragraph is displayed in "normal" value.</p>
<p class="fvc_sc">This paragraph is displayed in "small-caps" value.</p>
<p class="fvc_asc">This paragraph is displayed in "all-small-caps" value.</p>
<p class="fvc_pc">This paragraph is displayed in "petite-caps" value.</p>
<p class="fvc_apc">This paragraph is displayed in "all-petite-caps" value.</p>
<p class="fvc_uni">This paragraph is displayed in "unicase" value.</p>
<p class="fvc_tc">This paragraph is displayed in "titling-caps" value.</p>
</section>
<section class="samp_box">
<h2>font-variant-caps:全文大文字</h2>
<p class="fvc_norm">THIS PARAGRAPH IS DISPLAYED IN "NORMAL" VALUE.</p>
<p class="fvc_sc">THIS PARAGRAPH IS DISPLAYED IN "SMALL-CAPS" VALUE.</p>
<p class="fvc_asc">THIS PARAGRAPH IS DISPLAYED IN "ALL-SMALL-CAPS" VALUE.</p>
<p class="fvc_pc">THIS PARAGRAPH IS DISPLAYED IN "PETITE-CAPS" VALUE.</p>
<p class="fvc_apc">THIS PARAGRAPH IS DISPLAYED IN "ALL-PETITE-CAPS" VALUE.</p>
<p class="fvc_uni">THIS PARAGRAPH IS DISPLAYED IN "UNICASE" VALUE.</p>
<p class="fvc_tc">THIS PARAGRAPH IS DISPLAYED IN "TITLING-CAPS" VALUE.</p>
</section>
font-variant-capsに関連するCSSプロパティ
フォント・文字色 | |
---|---|
color | 文字の色を指定する |
font | フォントに関する様々な機能を一括で指定する |
font-family | 文字フォントの種類を指定する |
font-feature-settings | OpenTypeフォントの拡張書体の特性を制御する |
font-kerning | フォントの文字詰め(カーニング)を制御する |
font-language-override | 文字を表示する祭に使用する言語情報を一時的に変更する |
font-size | 文字フォントの大きさを指定する |
font-size-adjust | 現在のフォントサイズを基準に小文字の大きさを相対的に調整する |
font-stretch | 表示させるフォントの幅広や幅狭のフェイスを指定する |
font-style | フォントを筆記体や斜体で表示するかどうかを指定する |
font-synthesis | 太字や斜体に対応していないフォントの加工を制御する |
font-variant | フォントの表示形式やブラウザの合成規則を一括で指定する |
font-variant-alternates | 文字フォントの代替字体(グリフ)の選定を制御する |
font-variant-caps | 文字列に適用されるキャピタライゼーションルールを制御する |
font-variant-east-asian | 東アジアの言語で使われる字体を制御する |
font-variant-ligatures | 隣り合った文字フォントの合字(リガチャ)を制御する |
font-variant-numeric | 数値に関する文字表記を制御する |
font-variant-position | 上付き文字や下付き文字として配置されるべき字体の使用を制御する |
font-weight | 文字フォントの太さを指定する |