フォントとCSS : Typography

Tweet

Pocket

フォントとは同じデザインを持つ文字の組のこと(とても簡単な説明)。

同じフォントにボールド体_[1]やイタリック体_[2]が用意されている場合があり、
太さの違いやイタリック体などを含めて同じフォントの集まりをフォントファミリーと呼ぶ。たとえば有名なフォントファミリーArialにはボールド体やイタリック体を持っています。

[1] 文字を単に太くした太字に対してフォントの設計段階から太さを意図してデザインされたものをボールド体と呼びます。太さを何種類か用意しているフォントファミリーもある。
[2] 文字を単に傾けた斜体に対してフォントの設計段階から傾きを意図してデザインされたものをイタリック体と呼びます。それに対して単に傾けたものをオブリーク(Oblique)と呼ぶことがある。

• abcdefg
  CSSでfont-family:arialを指定しています。
• abcdefg
  CSSでfont-family:arial; font-weight: bold;を指定しています。
• abcdefg
  CSSでfont-family:arial; font-style: italic;を指定しています。
• abcdefg
  CSSでfont-family:arial; font-weight: bold; font-style: italic;を指定しています。

Arialはボールド体があるのでfont-weight: bold;を指定するとボールド体になります。同様にイタリック体があるのでfont-style: italic;を指定するとイタリック体になります。
ずっとArial BlackをArialのボールド体だと思っていました。Arial Blackは別のフォントファミリーみたいです(多分そうだと思います)。

abcdefg
font-family: ‘Arial Black’;を指定しています。

• あいうえお
  CSSでfont-family: “ＭＳ Ｐゴシック”;を指定しています。
• あいうえお
  CSSでfont-family: “ＭＳ Ｐゴシック”; font-weight: bold;を指定しています。
• あいうえお
  CSSでfont-family: “ＭＳ Ｐゴシック”; font-style: italic;を指定しています。
• あいうえお
  CSSでfont-family: “ＭＳ Ｐゴシック”; font-weight: bold; font-style: italic;を指定しています。

日本語にはイタリック体はないので単なる斜体。ＭＳ Ｐゴシックにはボールド体はない(自身ないです)ので単なる太字。

»CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
フォントに限らずWebデザインに関する勉強になるブログです。