「font-family(フォントの種類)」の編集履歴(バックアップ)一覧はこちら

font-family(フォントの種類)」(2015/06/20 (土) 21:49:23) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

目次 #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=80,oblique-font.png) このようにitalicとobliqueは全く同じ表示のされ方でした。~ では英語ではどうでしょうか??~ fontの部分に注目していただければわかる通り、まったく同じ表示のされ方でした。 *font-family カンマを間に挟んで複数のフォントを指定する事が可能になっています。~ その場合は閲覧者の環境に存在する最初のフォントで表示されます。~ フォントの値がそれでも閲覧者の環境に存在しない場合は以下のように、ブラウザシステムフォントから対応するフォントが表示されます。~ serif 日本語では明朝系フォント sans-serif 日本語ではゴシック系フォント fantasy 装飾されたフォント monospace すべてのフォントが同じ幅で表示される *font-familyの表示され方 ここではそれぞれfont-familyがパソコン上でどのように表示されるかを画像でおみせします。~ 上から順番に、serif、sans-serif、fantasy、monospace、となっています。 #image(width=100,font-family.png)
目次 #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=80,oblique-font.png) このようにitalicとobliqueは全く同じ表示のされ方でした。~ では英語ではどうでしょうか??~ fontの部分に注目していただければわかる通り、まったく同じ表示のされ方でした。 *font-family カンマを間に挟んで複数のフォントを指定する事が可能になっています。~ その場合は閲覧者の環境に存在する最初のフォントで表示されます。~ フォントの値がそれでも閲覧者の環境に存在しない場合は以下のように、ブラウザシステムフォントから対応するフォントが表示されます。~ serif 日本語では明朝系フォント sans-serif 日本語ではゴシック系フォント fantasy 装飾されたフォント monospace すべてのフォントが同じ幅で表示される *font-familyの表示され方 ここではそれぞれfont-familyがパソコン上でどのように表示されるかを画像でおみせします。~ 上から順番に、serif、sans-serif、fantasy、monospace、となっています。 #image(width=100,font-family.png) ~ ~ ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: