FONTS

Revised 2003/12/10

CSS ではフォントの種類を指定できます。フォントとは、描画される文字のことで、文字の種類には、ゴシック体、明朝体などがあります。各々のフォントの種類には、太字や斜体などのバリエーションがあります。

CSS では、次の 5 つの総称名で分類されています。これらを、 generic family と呼びます。

sans-serif
ゴシック体風。ひげ無し。
serif
明朝体風。ひげ付き。
monospace
等巾フォント。大文字、小文字、英数文字の巾が等しい。
fantasy
装飾体。花文字、ポップ文字など。読めないフォント(絵文字、シンボル・フォント)は除く。
cursive
手書き体風。

CSS でのフォントの指定方法

CSS の説明は別項に譲ります。

CSS でフォントを指定する場合、次のように記述します。

font-family: 'フォントの種類', 'フォントの種類', 総称名;

個別のフォント名 (font family) は一重引用符で括ります。総称名 (generic family) は括りません。複数のフォントを指定する場合、先に見つかったものが採用されます。全て見つからなかった場合は、ブラウザに設定されたデフォルトのフォントで代用されます。

次の例は、 p 要素のフォントを 'Arial', 'Tahoma', sans-serif に指定するものです。

p { font-family: 'Arial', 'Tahoma', sans-serif }

文章の読みやすさは、フォントの種類だけでなく、大きさと行間の方が強く影響します。次の例は、文字の大きさをブラウザの標準の1.1 倍、行の高さをフォントの高さの 1.3 倍に指定するものです。

p { font-size: 1.1em;
    line-height: 1.3;
    font-family: 'Arial', 'Tahoma', sans-serif }

フォント名に大文字と小文字は区別しません。'Arial' と 'arial' は同じフォントです。

詳細は、CSS 入門CSS リファレンスをご利用ください。

注意

フォントに凝るのは楽しいのですが、注意点もあります。

日本語は等幅フォント、英文はプロポーショナル・フォントが基本です。プロポーショナル・フォントとは、文字によってフォントの巾を変えて割り付けるフォントの種類のことです。プロポーショナルフォントでは、大文字、小文字、数字は全て異なる巾で割り付けられます。一方、当幅フォント場合は、全て同じ巾で割り付けられます。

ウェブサイトで使う場合の注意点もあります。コンピュータ上では、フォントはインストールする必要があります。ブラウザは、ローカルの PC 上で実行されているので、閲覧に利用しているコンピュータにインストールされているフォントだけしか表示できません。当該コンピュータにインストールされていないフォントが指定されている場合、ブラウザはデフォルトのフォントで代用します。如何に凝ったフォントを指定しても、そのフォントがインストールされたマシンを使って閲覧してもらわないと、単にデフォルトのフォントが選択されます。どのフォントをデフォルトにするかは、ブラウザの設定によって変更可能で、閲覧者がどのフォントを表示できるかを知るすべはありません。

文章は読みやすいフォントを選択しましょう。フォントが使えないマシンでも、閲覧に支障をきたさないようにデザインしましょう。

以下では、Winodows で利用できる一般的なフォントを、総称名でカテゴライズしています。CSS が OFF のブラウザでは当然全てのフォントがデフォルトのままで表示されます。インストールされていないマシンでも、デフォルトのままで表示されます。

フォントの差異は、フォントのサイズが大きくなるほどクローズアップされます。ここでは、標準の 1.5 倍のサイズを指定しています。

数年前からメンテしていますが、フォントにも趨勢があるなあという感じがします。凝っても、数年後には使えないかも知れないことを配慮してください。

sans-serif

無指定 abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
sans-serif abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'arial' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'arial black' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'arial narrow' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'arial unicode ms' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Century Gothic' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Franklin Gothic Medium' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Gulim' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Dotum' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Haettenschweiler' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Impact' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Ludica Sans Unicode' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Microsoft Sans Serif' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MS Sans Serif' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MV Boil' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'New Gulim' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Tahoma' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Trebuchet' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Verdana' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご

serif

無指定 abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
serif abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Batang' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Book Antiqua' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Bookman Old Style' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Century' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Estrangelo Edessa' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Garamond' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Gautami' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Georgia' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Gungsuh' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Latha' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Mangal' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MS Serif' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'PMingLiU' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Palatino Linotype' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Raavi' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Roman' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Shruti' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Sylfaen' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Times New Roman' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Tunga' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご

monospace

無指定 abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
monospace abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'BatangChe' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Courier' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Courier New' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'DotumChe' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'GlimChe' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'GungsuhChe' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'HG行書体' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Lucida Console' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MingLiU' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MS ゴシック' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MS 明朝' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'OCRB' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'SimHei' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'SimSun' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Small Fonts' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Terminal' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご

fantasy

無指定 abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
fantasy abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'alba' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'alba matter' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'alba super' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'baby kruffy' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Chick' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Croobie' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Fat' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Freshbot' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Frosty' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'GlooGun' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Jokewood' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Modern' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Monotype Corsiva' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Poornut' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Pussycat Snickers' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Weltron Urban' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご

cursive

無指定 abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
cursive abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Comic Sans MS' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'HGP行書体' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'HG正楷書体-PRO' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Jenkins v2.0' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Script' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご

絵文字

無指定 abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MS Outlook' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'MT Extra' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Symbol' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Webdings' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Wingdings' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Wingdings 2' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
'Wingdings 3' abcdefg hijklmnop qrstu vwxyz
ABCDEFG HIJKLMNOP QRSTU VWXYZ
01234 56789 日本語 ニホンゴ にほんご
SEO [PR] ܂Ƃ߃[ Windows7 ₦΍ f ^T[o[ Cu`bg SEO