お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

フォントの設定やらをしよう

今回はフォントについてのお話です。

今回のCSS

  • ・フォントの太さの指定
  • ・フォントのサイズの指定
  • ・フォントの種類を指定
の3つです。

フォントの太さを指定

太字にするかどうか、という指定です。

太字
普通!

.testClass
{
  font-weight:  bold; /* 太字 */
  font-weight: normal; /* 通常 */
}

9段階の太さを指定することができますが、
一般的なフォントでは9種類の太さが用意されていることはあまりなく、フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いようです。
<引用元>
なので、太字を指定する時は、boldで統一した方が良いですね。

フォントのサイズの指定

フォントサイズの指定、つまり文字の大きさを指定する事ができます。
指定方法は主に 【px指定】【em指定】【%指定】【キーワード指定】の4つが存在しています。

17pxの文字の大きさ
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】
となり、名前の通り、左から順番に大きくなります。

%で指定した時

%で指定した場合は、その親要素に設定されているフォントサイズを元に計算がされます。
なので同じ%指定でも親要素の大きさが違えば結果ももちろん変わってきます。
親要素でのフォントサイズ指定は17px 子要素ではフォントサイズ120%
親要素でのフォントサイズ指定は10px 子要素ではフォントサイズ120%

フォントの種類を指定

使用するフォントを指定することにより、統一した内容で見せれるようにすることができます。
表示できるフォントがあった時点でそのフォントを使用し、webページを描画します。
また、フォントが存在しない場合は、ブラウザで指定されたデフォルトのフォントが使用されます。

.+'゚'+.ヾ(´゚∀゚)ノ.+'゚'+.123 MSゴシック
.+'゚'+.ヾ(´゚∀゚)ノ.+'゚'+.123 ヒラギノ
.+'゚'+.ヾ(´゚∀゚)ノ.+'゚'+.123 メイリオ
.testClass
{
  font-family: MS PGothic;
  font-family: Hiragino Kaku Gothic ProN;
  font-family: Meiryo;
}