font-variant
| N7.0 Win |
N6.0 Win |
e6.0 Win |
e5.5 Win |
e5.0 Win |
e5.0 Mac |
e4.5 Mac |
O7.0 Win |
O6.0 Win |
|---|---|---|---|---|---|---|---|---|
| ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| 値 | normal | small-caps | inherit |
|---|---|
| 初期値 | normal |
| 適用 | すべての要素 |
| 継承 | する |
| レベル | - |
| メディア | visual |
スモールキャピタルのフォントを使用する為のプロパティです。スモールキャピタルのフォントとは、小文字の代わりに、やや小さくした大文字のグリフを使うフォントの事です。
'font'でほかの関連プロパティと合わせて指定する事も可能です。
次の例では、h3要素 をスモールキャピタルで表示し、em要素 は更に斜体で表示するようにします。
h3 { font-variant: small-caps }
em { font-style: oblique }
表示例として、以下のようなHTMLを表示させてみましょう。
<span style="font-variant: small-caps">They're Finally Back. Performin' For You</span>
例えばこれは大文字を若干小さくして小文字代わりに使った例です。
すべての文字を大文字に変換するという効果に限定すれば、'text-transform'で同じ効果を得られます。
何故このようなプロパティが存在するのかと言うと、装飾と、もう一つ、スクリーンリーダに対する配慮の意味があります。スクリーンリーダですと、すべて大文字で書かれた英語は、一文字ずつ読んでしまう可能性があります。例えば、BORDER と書くと、「ビーオーアールディーイーアール」と読んでしまう可能性があります。タイトルや見出しなど、大文字にしがちですが、それをすべて一文字ずつ読まれると、間抜けな上、鬱陶しく感じられてしまいます。そういう点でも有用なのです。
尚、これは大文字・小文字のある言語にだけしか効果がありませんので、日本語には適用されません。
'font'を併用する場合は、効果の兼ね合いに注意しましょう。
- 注意点
-
- 'font'を併用する場合は、効果の兼ね合いに注意しましょう。
- UAはすべて大文字に置き換えるだけでも適合出来ます。