初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL７. フォントに関する設定　その3 ★ フォントの一括指定

前章までで個別に指定してきたフォントに関する設定は、以下の順序で一括することができます。<サイズ>と<行の高さ>の間には「/」が入っていることに注意して下さい。他は<値>ごとに半角スペースが入ります。なお、<値>が省略された項目はそれぞれの初期設定（デフォルト）が表示に反映されます。

font: <斜体><スモールキャピタル><太さ><サイズ>/<行の高さ><フォント名>

ex.

p { font: italic small-caps bold 200%/3 "ＭＳ Ｐ明朝",serif; }

<行の高さ>については、テキスト全体の表示に関わる部分ですのでこちらで解説していますが、これはテキスト一行の縦幅のことです。この<値>はその行に表示されているフォントサイズに対応して、行の縦幅を指定するためのものなので、フォントに関する設定と一括されているものと思われます。例えばこの値が「3」となっていると、一行の縦幅がその行で用いられているフォントサイズの3倍ということになります。従って文字どうしの上下間には、フォントサイズの2倍分の空白が空くということです。

ex. 行の高さを「3」で指定

<付録> システムフォントを利用する

あまり一般的ではありませんが、ユーザーのパソコンで使われているシステムフォントをスタイルシートで呼び出して表示に反映させることも可能です。「font:」プロパティに以下の<値>を指定することで呼び出せます。この場合、実際の表示はユーザー個々の設定に依存することに注意が必要です。

icon ... アイコンの名前に使われているフォント

menu ... メニューに使われているフォント

message-box ... ダイアログボックスで使われているフォント

caption ... キャプションやラベルで使われているフォント

status-bar ... ステータスバーで使われているフォント

ex. 

font: icon;

font: caption;

初級篇2.VOL7. フォントに関する設定・その2 <<

>> 初級篇2.VOL8. テキスト表示に関する設定・その1