スモールキャピタル (Font styling)

 
フォント
ホーム > CSS2 Note > スモールキャピタル
C1- ie4- N6-

説明

font-variant: variant; C1- ie4- N6-
値:  normal | small-caps | inherit
初期値:normal適用要素:すべて継承:する%値:なしメディア:ビジュアル
スモールキャピタルとは、アルファベットのように活字が大文字、小文字の2種類存在する用字系において、要素内のテキストをすべて小文字と同じ大きさの小さい大文字で表示する機能です。本来的には、フォントファミリ内にある小さい大文字のバリエーションを使用することが理想的ですが、実際には、ブラウザが小文字のサイズに置き換えられる大文字のサイズを計算して使用されているようです。

スモールキャップス サンプル
 

使用例

I<span style="font-valiant:small-caps">nternationalization</span>
 

スモールキャピタル <'font-variant'>

normalC1- ie4- N6- スモールキャップでない標準のフォントを指定します。初期値。
small-capsC1- ie4- N6- スモールキャップのフォントを指定します。

スモールキャピタルのレンダリング

<style type="text/css"><!--
div {font-family:Arial, "MS PGothic", Osaka, sans-serif;}
span {font-variant:small-caps; font-family:Arial,sans-serif;}

.eg1 {font-variant:normal;}
.eg2 {font-variant:small-caps;}
--></style>

<div class="eg1">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<div class="eg2">
The quick brown fox jumps over the lazy dog.<br>
色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
</div><br>

<span>font-variant:small-caps</span>&nbsp;&nbsp;&nbsp;
<span>internationalization</span>&nbsp;&nbsp;&nbsp;<br>
<br>
<span>Font-Variant:Small-Caps</span>&nbsp;&nbsp;&nbsp;
<span>Internationalization</span>&nbsp;&nbsp;&nbsp;
small-capsは日本語には適用されません。
Arial(Windows & Mac)は欧文のみに適用されるフォント、MS PGothic(Windows), Osaka(Mac)は日本語に適用されるフォントです。
 
関連項目: font | font-family | font-style | font-variant | font-weight | font-size | font-stretch | font-size-adjust
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新