「font-family(フォントの種類)」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
目次
#contents
ホームページでの表現をより豊かにするためには書体(font)にもこだわりたいですね。~
CSSで指定できるフォントの種類は数限られているので、実際にはそのために画像などが使われたりすることもあります。~
そこで今回はフォントを指定できるCSSプロパティのfont-style、font-familyについて解説していこうと思います。~
*font-style
font-styleプロパティは三つの値を指定できます。
フォントの初期値はそれぞれのブラウザに依存します。~
normal 標準のフォント
italic イタリック体のフォント
oblique 斜体のフォント
しかしながら、多くの日本語フォントにはイタリック体や斜体が存在しないのでただ傾いた状態で表示されます。
*font-styleの表示され方
ここではそれぞれfont-styleがパソコン上でどのように表示されるかを画像でおみせします。~
normalの場合
#image(width=100,normal-font.png)
italicの場合
#image(width=100,italic-font.png)
obliqueの場合
#mage(width=100,oblique-font.png)
このようにitalicとobliqueは全く同じ表示のされ方でした。~
では英語ではどうでしょうか？？
*font-family
カンマを間に挟んで複数のフォントを指定する事が可能になっています。~
その場合は閲覧者の環境に存在する最初のフォントで表示されます。~
フォントの値がそれでも閲覧者の環境に存在しない場合は以下のように、ブラウザシステムフォントから対応するフォントが表示されます。~
serif 日本語では明朝系フォント
sans-serif 日本語ではゴシック系フォント
fantasy 装飾されたフォント
monospace すべてのフォントが同じ幅で表示される
*実際のコードとfont-familyの表示され方
ここではそれぞれfont-familyがパソコン上でどのように表示されるかを画像でおみせします。
目次
#contents
ホームページでの表現をより豊かにするためには書体(font)にもこだわりたいですね。~
CSSで指定できるフォントの種類は数限られているので、実際にはそのために画像などが使われたりすることもあります。~
そこで今回はフォントを指定できるCSSプロパティのfont-style、font-familyについて解説していこうと思います。~
*font-style
font-styleプロパティは三つの値を指定できます。
フォントの初期値はそれぞれのブラウザに依存します。~
normal 標準のフォント
italic イタリック体のフォント
oblique 斜体のフォント
しかしながら、多くの日本語フォントにはイタリック体や斜体が存在しないのでただ傾いた状態で表示されます。
*font-styleの表示され方
ここではそれぞれfont-styleがパソコン上でどのように表示されるかを画像でおみせします。~
normalの場合
#image(width=100,normal-font.png)
italicの場合
#image(width=100,italic-font.png)
obliqueの場合
#image(width=100,oblique-font.png)
このようにitalicとobliqueは全く同じ表示のされ方でした。~
では英語ではどうでしょうか？？
*font-family
カンマを間に挟んで複数のフォントを指定する事が可能になっています。~
その場合は閲覧者の環境に存在する最初のフォントで表示されます。~
フォントの値がそれでも閲覧者の環境に存在しない場合は以下のように、ブラウザシステムフォントから対応するフォントが表示されます。~
serif 日本語では明朝系フォント
sans-serif 日本語ではゴシック系フォント
fantasy 装飾されたフォント
monospace すべてのフォントが同じ幅で表示される
*実際のコードとfont-familyの表示され方
ここではそれぞれfont-familyがパソコン上でどのように表示されるかを画像でおみせします。
