フォントをスモールキャップに変更できるfont-variantプロパティ
font-variant

 フォントをスモールキャップに変更する際に使用します。スモールキャップとは背の低い(小文字サイズの)大文字のことです。

 もし、スモールキャップに変更できないフォントに指定した場合、自動で大文字を縮小したものが表示されるか、もしくはこの指定を無視されてしまいます。どうしてもこういったことを実現したい場合には、画像で置き換えた方がいいでしょう。

 ちなみに、日本語には小文字がないので、日本語フォントには作用しません。

基本データ

構文 セレクタ{font-variant:値;}
継承
キーワードを使って指定する場合
normal、small-caps
親から継承させる場合
inherit
効果 フォントをスモールキャップに変更できる
初期値 normal
適用箇所 すべての要素

HOGEhogeですね。

p { font-variant: small-caps;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.fontVariant

jQueryを使った参照方法

$('【セレクタ】').css('font-variant','【値】');
$('【セレクタ】').css({'font-variant':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間