※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

目次

ホームページでの表現をより豊かにするためには書体(font)にもこだわりたいですね。
CSSで指定できるフォントの種類は数限られているので、実際にはそのために画像などが使われたりすることもあります。
そこで今回はフォントを指定できるCSSプロパティのfont-style、font-familyについて解説していこうと思います。

font-style

font-styleプロパティは三つの値を指定できます。 フォントの初期値はそれぞれのブラウザに依存します。

normal 標準のフォント
italic イタリック体のフォント
oblique 斜体のフォント

しかしながら、多くの日本語フォントにはイタリック体や斜体が存在しないのでただ傾いた状態で表示されます。

font-styleの表示され方

ここではそれぞれfont-styleがパソコン上でどのように表示されるかを画像でおみせします。
normalの場合

italicの場合

obliqueの場合

このようにitalicとobliqueは全く同じ表示のされ方でした。
では英語ではどうでしょうか??
fontの部分に注目していただければわかる通り、まったく同じ表示のされ方でした。

font-family

カンマを間に挟んで複数のフォントを指定する事が可能になっています。
その場合は閲覧者の環境に存在する最初のフォントで表示されます。
フォントの値がそれでも閲覧者の環境に存在しない場合は以下のように、ブラウザシステムフォントから対応するフォントが表示されます。

serif 日本語では明朝系フォント
sans-serif 日本語ではゴシック系フォント
fantasy 装飾されたフォント
monospace すべてのフォントが同じ幅で表示される

font-familyの表示され方

ここではそれぞれfont-familyがパソコン上でどのように表示されるかを画像でおみせします。
上から順番に、serif、sans-serif、fantasy、monospace、となっています。





以上