段落文章の書体、サイズ、行の高さ、スタイルをまとめて指定する
段落文章の書体、サイズ、行の高さ、スタイルをまとめて指定することができます。
<div style="font:イタリックや斜体の指定 スモールキャップスの指定 文字の太さ 文字の大きさ/行の高さ 書体">段落文章</div>
というふうに、スペースで区切って指定内容を併記します。<p>タグや、他のブロックタグでもＯＫです。
- イタリックや斜体の指定
下記のキーワードで指定できます。
キーワード 文字のスタイル normal 通常 italic イタリック体 oblique 斜体
- スモールキャップスの指定
下記のキーワードで指定できます。
キーワード 文字のスタイル normal 通常 small-caps スモールキャピタル
- 文字の太さ
下記のキーワードまたは数値で指定できます。
| キーワード | 文字の太さ |
| normal | 通常 |
| bold | 太字 |
| bolder | より太く |
| lighter | より細く |
| 数値 |
| 100（細い）～900（太い） ※100刻みで指定 |
- 文字の大きさ
文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
※正確にはデバイス依存の相対サイズ
| 絶対サイズ キーワード | 文字の大きさ |
| xx-small | 超特小 |
| x-small | 特小 |
| small | 小 |
| medium | 標準 |
| xx-large | 超特大 |
| x-large | 特大 |
| large | 大 |
| 相対サイズ キーワード | 文字の大きさ |
| smaller | より小さく |
| larger | より大きく |
- 行の高さ （→詳しくはこちら
行の高さは、下記の絶対サイズまたは相対サイズから指定できます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
| 数字のみ | 基準書体のサイズに対する倍率 |
※正確にはデバイス依存の相対サイズ
- 書体名 （→詳しくはこちら）
' Osaka ' , ' 極細明朝 '
というふうに、' （シングルクォート）で囲った上に、,（カンマ）で区切って複数指定することができます。これは、ブラウザのシステムが対応していない場合に、代わりに表示する書体を指定するためです。
サンプルソースです。
<div style="font:italic 16px/2em '極細明朝' ,ＭＳ 明朝'"> この段落は、イタリック体、文字の大きさ 16ピクセル、行の高さ 2em、<ｂｒ> 書体は極細明朝、なければＭＳ 明朝で表示されます。<ｂｒ> Netscape では、フォント名に日本語を指定すると無視されます。 </div>
これを表示させると、次のようになります。
|
この段落は、イタリック体、文字の大きさ 16ピクセル、行の高さ 2em、
書体は極細明朝、なければＭＳ 明朝で表示されます。 Netscape では、フォント名に日本語を指定すると無視されます。 |
