目次
ホームページでの表現をより豊かにするためには書体(font)にもこだわりたいですね。
CSSで指定できるフォントの種類は数限られているので、実際にはそのために画像などが使われたりすることもあります。
そこで今回はフォントを指定できるCSSプロパティのfont-style、font-familyについて解説していこうと思います。
font-styleプロパティは三つの値を指定できます。
フォントの初期値はそれぞれのブラウザに依存します。
normal 標準のフォント italic イタリック体のフォント oblique 斜体のフォント
しかしながら、多くの日本語フォントにはイタリック体や斜体が存在しないのでただ傾いた状態で表示されます。
ここではそれぞれfont-styleがパソコン上でどのように表示されるかを画像でおみせします。
normalの場合
italicの場合
obliqueの場合
このようにitalicとobliqueは全く同じ表示のされ方でした。
では英語ではどうでしょうか？？
fontの部分に注目していただければわかる通り、まったく同じ表示のされ方でした。
カンマを間に挟んで複数のフォントを指定する事が可能になっています。
その場合は閲覧者の環境に存在する最初のフォントで表示されます。
フォントの値がそれでも閲覧者の環境に存在しない場合は以下のように、ブラウザシステムフォントから対応するフォントが表示されます。
serif 日本語では明朝系フォント sans-serif 日本語ではゴシック系フォント fantasy 装飾されたフォント monospace すべてのフォントが同じ幅で表示される
ここではそれぞれfont-familyがパソコン上でどのように表示されるかを画像でおみせします。
上から順番に、serif、sans-serif、fantasy、monospace、となっています。
以上
