フォントの設定やらをしよう
今回はフォントについてのお話です。
今回のCSS
- ・フォントの太さの指定
- ・フォントのサイズの指定
- ・フォントの種類を指定
フォントの太さを指定
太字にするかどうか、という指定です。
太字
普通!
.testClass { font-weight: bold; /* 太字 */ font-weight: normal; /* 通常 */ }
9段階の太さを指定することができますが、
一般的なフォントでは9種類の太さが用意されていることはあまりなく、フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いようです。
<引用元>
なので、太字を指定する時は、boldで統一した方が良いですね。
フォントのサイズの指定
フォントサイズの指定、つまり文字の大きさを指定する事ができます。
指定方法は主に 【px指定】【em指定】【%指定】【キーワード指定】の4つが存在しています。
4emの文字の大きさ
150%の文字の大きさ
xx-largeの文字の大きさ
.testClass { font-size: 17px; font-size: 4em; font-size: 150%; font-size: xx-large; }
キーワード指定については7つのキーワードが存在しています。
【xx-small】【x-small】【small】【medium】【large】【x-large】【xx-large】
となり、名前の通り、左から順番に大きくなります。
%で指定した時
%で指定した場合は、その親要素に設定されているフォントサイズを元に計算がされます。なので同じ%指定でも親要素の大きさが違えば結果ももちろん変わってきます。
フォントの種類を指定
使用するフォントを指定することにより、統一した内容で見せれるようにすることができます。
表示できるフォントがあった時点でそのフォントを使用し、webページを描画します。
また、フォントが存在しない場合は、ブラウザで指定されたデフォルトのフォントが使用されます。
.+'゚'+.ヾ(´゚∀゚)ノ.+'゚'+.123 ヒラギノ
.+'゚'+.ヾ(´゚∀゚)ノ.+'゚'+.123 メイリオ
.testClass { font-family: MS PGothic; font-family: Hiragino Kaku Gothic ProN; font-family: Meiryo; }