font-variantとは
- font-variant とは次の語句からなるCSSのプロパティです。
- font
- 読み: フォント
意味: 書体 - variant
- 読み: バリアント
意味: 異なる、変型
font-variantプロパティの概要
このプロパティは原文の中の特定の文字に代替字を提供します。
font-variantプロパティには各種の代替字を提供するための個別プロパティが存在し、その個別プロパティの設定を総合的に 制御する総合プロパティとなります。下記に個別プロパティをリストします。
- font-variant-caps
- font-variant-numeric
- font-variant-alternates
- font-variant-ligatures
- font-variant-east-asian
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{font-variant: 設定値}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルにはテキストを内包したdiv要素を使っています。 このdiv要素に対してプロパティを適用していきます。 要素が二つ並んでいるものは、左の要素がプロパティ未適用であり、右のdiv要素が各キーワード適用後のサンプルとなっています。
初期値: normal
初期値のnormalでは、変化のない通常のフォントを表示します。
a b c
1 2 3
○△□×
div{font-variant: normal;}キーワード値: small-caps (font-variant-caps)
small-capsキーワードは、小文字を小文字の大きさそのままで大文字のフォントに変換します。
ただし、これは使用しているフォントがOpenTypeのsmcpに対応している必要があります。
このキーワードは個別プロパティ font-variant-caps のキーワードです。
a b c
1 2 3
○△□×
a b c
1 2 3
○△□×
div{font-variant: small-caps;}キーワード値: all-small-caps (font-variant-caps)
all-small-capsキーワードは、全ての文字を小文字の大きさで大文字のフォントに変換します。 また数字や記号なども小文字の大きさで表示されます。
ただし、これは使用しているフォントがOpenTypeのc2sc,smcpに対応している必要があります。
このキーワードは個別プロパティ font-variant-caps のキーワードです。
a b c
1 2 3
○△□×
a b c
1 2 3
○△□×
div{font-variant: all-small-caps;}キーワード値: petite-caps (font-variant-caps)
petite capitalsキーワードは、小文字をプチサイズの大きさで大文字のフォントに変換します。
ただし、これは使用しているフォントがOpenTypeのpcapに対応している必要があります。
このキーワードは個別プロパティ font-variant-caps のキーワードです。
a b c
1 2 3
○△□×
a b c
1 2 3
○△□×
div{font-variant: petite-caps;}キーワード値: all-petite-caps (font-variant-caps)
all-petite capitalsキーワードは、全ての文字をプチサイズの大きさで大文字のフォントに変換します。 また数字や記号などもプチの大きさで表示されます。
ただし、これは使用しているフォントがOpenTypeのc2pc,pcapに対応している必要があります。
このキーワードは個別プロパティ font-variant-caps のキーワードです。
a b c
1 2 3
○△□×
a b c
1 2 3
○△□×
div{font-variant: all-petite-caps;}キーワード値: unicase (font-variant-caps)
unicaseキーワードは、小文字を除く全ての文字を小文字の大きさで大文字のフォントに変換します。 また数字や記号なども小文字の大きさで表示されます。
ただし、これは使用しているフォントがOpenTypeのuincに対応している必要があります。
このキーワードは個別プロパティ font-variant-caps のキーワードです。
a b c
1 2 3
○△□×
a b c
1 2 3
○△□×
div{font-variant: unicase;}キーワード値: titling-caps (font-variant-caps)
titling-capsキーワードは、タイトルキャピタルの表示を有効にします。
ただし、これは使用しているフォントがOpenTypeのtitlに対応している必要があります。
このキーワードは個別プロパティ font-variant-caps のキーワードです。
a b c
1 2 3
○△□×
a b c
1 2 3
○△□×
div{font-variant: titling-caps;}キーワード値: ordinal (font-variant-numeric)
ordinalキーワードは、序数記号が小さめのフォントとなり、インラインの上部に表示します。
ただし、これは使用しているフォントがOpenTypeのordnに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: ordinal;}キーワード値: slashed-zero (font-variant-numeric)
slashed-zeroキーワードは、0(ゼロ)をスラッシュ付きの0で表示します。
ただし、これは使用しているフォントがOpenTypeのzeroに対応している必要があります。
英字のOやo(オー)の文字と混同を避けるために有効です。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: slashed-zero;}キーワード値: lining-nums (font-variant-numeric)
lining-numsキーワードは、全てをベースライン上に並べる表記を有効にします。
ただし、これは使用しているフォントがOpenTypeのlnumに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: lining-nums;}キーワード値: oldstyle-nums (font-variant-numeric)
oldstyle-numsキーワードは、3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。
ただし、これは使用しているフォントがOpenTypeのonumに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: oldstyle-nums;}キーワード値: proportional-nums (font-variant-numeric)
proportional-numsキーワードは、数字をすべて同じ大きさにしない表記を有効にします。
ただし、これは使用しているフォントがOpenTypeのpnumに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: proportional-nums;}キーワード値: tabular-nums (font-variant-numeric)
tabular-numsキーワードは、数字を同じ大きさにする表記を有効にします。
ただし、これは使用しているフォントがOpenTypeのtnumに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: tabular-nums;}キーワード値: diagonal-fractions (font-variant-numeric)
diagonal-fractionsキーワードは、分数の表記を制御します。 数値が小さめになり、インラインの上部に配置されます。
ただし、これは使用しているフォントがOpenTypeのfracに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
ここではdiv要素とspan要素を使い、設定を使い分けていますのでHTMLのコードも掲載しておきます。
<div>1/<span>2</span></div>div{
font-variant: diagonal-fractions;
}
span{
font-variant: all-small-caps;
}
キーワード値: stacked-fractions (font-variant-numeric)
stacked-fractionsキーワードは、分数の表記を制御します。 分子と分母が小さめになり、/(スラッシュ)は水平線で表記されます。
ただし、これは使用しているフォントがOpenTypeのafrcに対応している必要があります。
このキーワードは個別プロパティ font-variant-numeric のキーワードです。
div{font-variant: stacked-fractions;}補足: その他の個別プロパティとキーワード
fontプロパティの個別プロパティの一つとしてfont-variantプロパティがあるわけですが、 font-variantプロパティの個別プロパティも存在します。 ここまで読んてこられた方は分かると思いますが、キーワード値を紹介してきた各セクションには個別プロパティの名前を掲載してきました。 しかし、このページで紹介した個別プロパティは二つのプロパティにとどめています。その主な理由としては需要が非常に少ないと思われることと、 ブラウザーとフォントの対応の低さが挙げられます。状況をみて掲載内容を追加することもあるかもしれませんが、以下は簡略した形で各個別プロパティと キーワード値を紹介しておきます。
| 個別プロパティ | キーワード値、又は関数 |
|---|---|
| font-variant-alternates | historical-forms |
| normal | |
| stylistic(user-defined-ident) | |
| styleset(user-defined-ident) | |
| character-variant(user-defined-ident) | |
| swash(user-defined-ident) | |
| ornaments(user-defined-ident) | |
| annotation(user-defined-ident) | |
| swash(ident1) annotation(ident2) | |
| font-variant-ligatures | normal |
| none | |
| common-ligatures | |
| no-common-ligatures | |
| discretionary-ligatures | |
| no-discretionary-ligatures | |
| historical-ligatures | |
| no-historical-ligatures | |
| contextual | |
| no-contextual | |
| font-variant-east-asian | normal |
| ruby | |
| jis78 | |
| jis83 | |
| jis90 | |
| jis04 | |
| simplified | |
| traditional | |
| full-width | |
| proportional-width | |
| ruby full-width jis83 |
キーワード値: none
このnoneキーワードはfont-variantのキーワード値ではなく、 font-variant-ligaturesのキーワード値です。font-variantにこのキーワードを設定すると font-variant-ligaturesプロパティはnoneに設定され、その他の個別プロパティの値はnormalに設定されます。
div{font-variant: none;}グローバル値
font-variantプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のnormalに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
セレクター{font-variant: グローバル値;}補足説明
- すべての要素に適用可能
- 親要素の値を継承する
まとめ
ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
font-variant: normal;
font-variant: small-caps;
font-variant: all-small-caps;
サンプル: ブロック要素
Hello World!
a b c
1 2 3
○△□×