フォント
フォントに関する設定を行う．
フォントの設定
font-familyプロパティ
フォントの種類を指定する．
| 適用できる要素 | すべての要素 |
|---|
| 継承 | する |
|---|
| テンプレート |
font-family: 値;
|
|---|
| 指定できる値 | 値の効果 |
|---|
| フォント名 | 「MS P明朝」や「Verdana」などの指定したフォントで表示される． |
| serif | 明朝体や「Times New Roman」のようなひげ付き文字で表示される． |
| sans-serif | ゴシック体や「Arial」のようなひげなし文字で表示される． |
| cursive | 筆記体で表示される． |
| fantasy | 装飾文字で表示される． |
| monospace | 「MS ゴシック」や「Courier New」のような等幅フォントで表示される． |
| CSSの例文 |
p.font-family{
font-family: Verdana;
}
|
|---|
| XHTMLの例文 |
<p class="font-family">
Natsume Soseki 夏目 漱石
</p>
|
|---|
| 出力結果 |
|
|---|
font-sizeプロパティ
文字の大きさを指定する．
| 適用できる要素 | すべての要素 |
|---|
| 継承 | する |
|---|
| テンプレート |
font-size: 値;
|
| 指定できる値 | 値の効果 |
|---|
| xx-large | 大きい
通常
小さい |
| x-large |
| large |
| medium |
| small |
| x-small |
| xx-small |
| XHTMLの例文 |
p.font-size{
font-size: xx-large;
}
|
| CSSの例文 |
<p class="font-size">
Natsume Soseki
</p>
|
| 出力結果 |
|
font-weightプロパティ
文字の太さを指定する．
| 指定できる値 | 値の効果 |
|---|
| 100 | 細い
通常
太い |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| bold | もっとも太い700と同じ太さで表示する． |
| normal | 通常と同じ400の太さで表示する． |
| bolder | 一段太めに表示する． |
| lighter | 一段細めに表示する． |
| CSSの例文 |
p.font-weight{
font-weight: 500;
}
|
| XHTMLの例文 |
<p class="font-weight">
Natsume Soseki
</p>
|
| 出力結果 |
|
font-styleプロパティ
文字を斜体にする．
| 指定できる値 | 値の効果 |
|---|
| normal | 通常の書体で表示される． |
| italic | 要素を斜めに表示するが，イタリック体が含まれておればその書体で表示す． |
| oblique | 要素を斜めに表示するが，斜体が含まれておればその書体で表示する． |
| CSSの例文 |
p.font-style{
font-style: italic;
}
|
| XHTMLの例文 |
<p class="font-style">
夏目 漱石
</p>
|
| 出力結果 |
|
font-variantプロパティ
頭文字が大文字の単語をスモールキャピタルで表示する．
| 指定できる値 | 値の効果 |
|---|
| normal | 通常どおりに表示する． |
| small-caps | スモールキャピタルで表示する． |
| CSSの例文 |
p.font-variant{
font-variant: small-caps;
}
|
| XHTMLの例文 |
<p class="font-variant">
natsume soseki
</p>
|
| 出力結果 |
|
fontプロパティ
フォントの設定をまとめて指定する．
| 指定できる値 | 値の効果 |
|---|
| style値 variant値 weight値
size値/height値 family値 |
sizeとfamilyの値は必須であるが，他は省略可能である． |
| caption | キャプション付き部分に使われるフォントで表示する． |
| icon | アイコンのラベルに使われるフォントで表示する． |
| menu | メニューに使われるフォントで表示する． |
| message-box | ダイアログボックスに使われるフォントで表示する． |
| sammll-caption | 小さい部品のラベルに使われるフォントで表示する． |
| status-bar | ステータスバーに使われるフォントで表示する． |
| CSSの例文 |
p.font{
font: bold italic 1.5em/1.2 Verdana ;
}
|
| XHTMLの例文 |
<p class="font">
Natsume Soseki 夏目 漱石
</p>
|
| 出力結果 |
|