WEBリファレンス/CSSリファレン - フォント font‐
HTML4.01では、<font>タグが非推奨になりました。スタイルで指定するようにしましょう。
スタイルシートでは font-family : として定義します。フォント関連のプロパティをまとめました。
| 名前 | 解説 | サンプル |
|---|---|---|
| カラー[color] | 文字の色(RGB) | #FFFFFF |
| フォント[font-family] | フォント名、又は指定のフォント・ファミリー | 'MS Pゴシック',Osaka,sans-serif |
| フォントのサイズ[font-size] | サイズ指定、又は指定の表現 | none(0) pt / px / pc em / ex mm / cm / in % |
| フォントの太さ[font-weight] | 指定の表現、又は倍率 | bold / bolder / normal / lighter 100 / 200 / … / 900 |
| 斜体文字[font-style] | 指定の表現 | normal / italic / oblique |
| 小型英文字[font-variant] | 指定の表現 | normal / small-caps |
| 行間隔[line-height] | サイズ指定、又は倍率 | none(0) pt / px / pc em / ex mm / cm / in % |
| 線形[text-decoration] | 指定の表現 | underline / line-through / overline / underline overline / blink / none |
| 大文字[text-transform] | 指定の表現 | capitalize / uppercase / lowercase |
| 文字表記の方向[direction] | 指定の表現 | ltr / rtl |
| 方向の上書き[unicode-bidi] | 指定の表現 | normal / embed / bidi-override |
CSSリファレンス:目次
文字の色を指定する(RGB)
《sample.css》
<style type="text/css">
body {
color: #FF0000;
}
</style>
フォント名又はフォント・ファミリーを指定する
《sample.css》
<style type="text/css">
body {
font-family: 'MS Pゴシック',Osaka,Arial,Helvetica,sans-serif;
}
</style>
フォントのサイズ
《sample.css》
h1 { font-size: 18pt; }
h2 { font-size: 14pt;}
p { font-size: 10.5pt; }
small { font-size: 0.5em; }
フォントの太さ
《sample.css》
p.sample1 {
font-weight: ;
}
フォント斜体文字
《sample.css》
span.sample {
font-style: italic;
}
小型英文字
《sample.css》
span.sample {
font-variant: small-caps;
}
行間隔
《sample.css》
span.sample {
line-height: 200%;
}
線形(修飾)
《sample.css》
span.sample {
text-decorationt: underline; ①下線
}
大文字
《sample.css》
span.sample {
text-transform: capitalize; ①先頭を大文字
}
文字表記の方向・方向の上書き
unicode-bidiプロパティと合わせて使用します。
《sample.css》
span.sample {
direction: ltr; ①左から右へ
unicode-bidi: bidi-override; ②UNICODEの方向を無効
}