この文書の情報
Katsu <katsu@ea.mbn.or.jp>最終改訂日：2008年02月17日
文書のテキストを視覚的に表現する際に用いられるフォントを指定するプロパティ。
| 値 | [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit |
|---|---|
| 初期値 | UAの実装に依存 |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，フォントファミリ名と総称ファミリ名の優先順リストを指定します。
単独フォントだけでは，文書内にあるすべての文字に対するグリフ（glyph）――文書内の抽象的な文字情報を視覚的に示すときに実際に表現される字形のこと。印刷術的なスタイルが反映されて，画面もしくは紙面上にビットマップまたはアウトラインの形式で描かれる――が得られない事もあるでしょうし，著者が希望するそのフォントがユーザのシステム環境において存在するとも限りません。
これらの問題を解決するために，このプロパティでは，同じスタイルと大きさを有するフォント――グリフ（字形データ）の集合体のことで，すべてのグリフは書体デザイン，大きさ，外観など，集合全体に共通する基調に従っている――のリストを指定できます。リストに並べられたフォントは，各文字に対するグリフを含んでいるかどうかの順に検證されます。このリストをフォントセット（font set）と呼びます。
フォントファミリ（font family）とは，デザインの一貫性を保つために組合せられるフォント集合のことです。たとえば特定のフォントファミリは，通常体の他にもボールドやイタリックなど個別に設計された書体（typeface）のフォントを含みます； それらをフォントフェイスと呼ぶ。類似した外観を生成させることも可能ですが，やはり専用のフェイスを持つファミリ名を指定したほうが，綺麗に表現されるでしょう。
各値は以下のような意味を持ちます：
<family-name>複数のフォントファミリ名をコンマ（,）区切りの優先順リストで指定する。指定されたフォントセットは，ユーザの環境で利用できるかどうか，各文字に対するグリフが含まれているか，順々に検證されてゆき，各フォントからグリフを採用してゆきます。
フォントファミリ名に空白類を含んだり（たとえばTimes New Romanのように），もしくは約物類を含むなら，単引用符（'）あるいは二重引用符（"）で括るか，適切にエスケープしてください。ファミリ名は常に引用符で括るようにしても問題ありません。
（補足：外部スタイルで仮名や漢字などの名前を指定するなら，冒頭に@charset規則を記して置くとよいでしょう。）
<generic-family>フォントファミリの一般的性質をあらわす総称ファミリ（generic family）を指定する。これは指定フォントのすべてが選択不可な場合を考慮したもので，スタイル設計者の意図を最低限反映する仕組です。つまり，ユーザ環境に存在するフォントの中から適切なものが選ばれます（賢くない実装もある）。UAに依ってはユーザ設定により，各総称ファミリに対応するフォントを選べるかもしれません。
（参考図: Mozillaブラウザの設定項目にあるフォント設定パネル； PNG形式； 6Kバイト）
指定されたフォントファミリのすべてがユーザ環境で扱えない場合の最終的な選択肢として，優先順リストの末尾に "総称ファミリ名" も指定するようにしてください。なお，総称ファミリ名はキーワードの一種なので，引用符で括ってはなりません。
総称ファミリには serif，sans-serif，cursive，fantasy，monospace の五種類が用意されています：
serif線端が「撥ね」ていたり，裾が太くまたは細く，髭や鱗などがあるフォント。（和文では一般に明朝体）
たとえば，ＭＳ Ｐ明朝，平成明朝，Times，Times New Roman，Garamond など。
sans-serif線端が「止め」で裾の広がりなどがなく，画線にあまり変化のないフォント。（和文では一般にゴシック体）
たとえば，ＭＳ Ｐゴシック，Osaka，平成角ゴシック，Arial，Verdana，Helvetica など。
cursive続け書きになっていて，単なるイタリック書体よりも筆記的特徴を備えたフォント。グリフは部分的あるいは完全に繋っており，普通に印刷される文字よりも手書き・毛筆らしく見える。（和文であれば草書や行書に近いと思われる）。
たとえば，Caflisch Script，Snell Roundhand，Zapf Chancery など。
fantasy装飾がメインではあるが，文字の表現は消失していないフォント。絵と記号 "だけ" の物は異る。
たとえば，Critter，Cottonwood，Studz，FB Reactor など。
monospace全グリフが共通して固定幅である等幅フォント。ソースコードのサンプルを添えるのに用いられる。
たとえば，ＭＳ ゴシック，Osaka−等幅，Courier，Courier New など。
例． 和欧混淆文の段落において次の規則を適用したなら，各フォントは下記の手順で採用されるでしょう：
p { font-family: Garamond, Times, "ＭＳ 明朝", serif; }1） まづラテン文字などのグリフを欧文フォントの "Garamond" または "Times" から得る。 2） ついで，欧文フォントには存在しない仮名や漢字などのグリフを "ＭＳ 明朝" から得る。 3） そしてそれら以外の場合は 'serif' に分類される何らかのフォントから得る。
ただし既存ブラウザの多くでは，フォントセットから単一のファミリしか採用しないなど，正しく実装していません。
【註】：本文の主要部分については，著者側でフォントファミリを設定すべきでない，と屡々指摘されます。なぜなら，ユーザはデフォルト設定のフォントとして，各自の環境および感覚において最適と考えられるものを用いるからです。文書において和文を主体とするのなら，特に和文フォントの濫用は避けるべきでしょう。本文とは区別して際立たせるべき範囲で，効果的に'font-family'プロパティを用いましょう。
（餘談：たといフォントを変更しても，一般に字体はそのままです。字体とは，ある一つの文字を表現する抽象的な点画構成のあり様であり，別の文字とは明確に区別できる特徴のことです； たとえば “十” という字は，よこ線とたて線を交叉した二画であり，この特徴はフォントに拘らず維持されるでしょう。一定の文字体系において，それぞれの字体を一貫した様式と基調で表現したものを書体と呼び，それを基に造形されたグリフの集合体をフォントと呼びます。）
| 値 | normal | italic | oblique | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
設定されたフォントファミリの中から，正体，オブリーク体（斜体），イタリック体の何れかを要求します。
（補足：日本ではイタリックの概念が稀薄ですが，単なる「斜体」とは明確に区別されます。下記参照。）
各値は以下のような意味を持ちます：
normalデータベースの中から正体（せいたい）のフォントを要求する。
（補足：この値は一見して無意味に感じられるかもしれませんが，ウェブブラウザの持つデフォルトスタイルからしてイタリック（もしくは斜体）である要素，もしくは祖先から継承されているイタリックもしくは斜体について，傾きのない正体のフォントに戻したい場合に用います。）
obliqueデータベースの中からオブリークに分類されるフォントを要求する。
オブリーク体とは正体を単純に傾けたもので，サンセリフ系ファミリの一書体であることが多い様です。
実際には，正体フォントを（計算で）強制的に傾ける事により，斜体字を生成してもよい，とされます。
italicデータベースの中からイタリックに分類されるフォントを要求する。
該当するフォントが無い場合には，'oblique' に分類される書体を利用してもよい，とされます。
イタリック体というのは "欧文用字形" における字形分類のひとつで，同一ファミリの正体に比べると相対的に続け書きで，手書きに近いけれども，元々の筆記体ほどは続け書きではない書体のこと。多くの場合セリフ系では，ローマン（正体）とイタリックの併用が意図されて，ペアで設計されます。またサンセリフ系の場合，イタリックと同じようなフェイスは，字形を別分類にするより正体を傾けるだけのことが多いようです。イタリックは主に（欧米では），注意書きや強調，他国語，出版物名，船名等をあらわすのに用いられています。
【註】：書体のイタリックとオブリークは明確に異るのですが，実際にはたとい欧文であるとしても，両者を同一視してしまう事例が多いようです。また和文ファミリであれば，一般にイタリック体（または斜体）のフェイスを含まないので，通常体をむりやり傾けることになります。その場合，フォントのデザインや大きさ，環境に依っては，潰れたり擦れるかもしれません。特にかなや漢字は汚くなるかもしれません。
（補足：構造を示すem，dfn, cite要素などにおいて一般にイタリックになるのも，実は西洋の慣習です。しかしそれはデフォルトの外見に過ぎません。著者の意図としてイタリックに必然性があるのなら，イタリックを含むセリフ系のフォントセットを設定して，明確に 'font-style: italic' を宣言すべきです。）
font-family: "Times New Roman", Times, serif;| 値 | normal | small-caps | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
設定されたフォントファミリの中から，スモールキャピタルのフォントを要求します。
スモールキャピタルのフォントは，小文字のフォントとして "縦幅比" のやや異る小さな大文字を用います。このプロパティは活字ケースが二種類ある用字系（たとえばラテンやギリシャ，キリルなどの用字系には大文字と小文字がある）に対してスモールキャピタルのフォントを要求します。ただし，活字ケースが一種類のみの用字系（たとえばヘブライ文字や漢字など）に対しては視覚効果はありません。
（補足：つまり，かなや漢字の部分に 'small-caps' を指定しても，視覚効果は現れない筈です。）
単に大文字に変換して表示したい場合には，'text-transform'プロパティを利用してください。
各値は以下のような意味を持ちます：
normalスモールキャピタルではないフォントを要求する。
small-capsスモールキャピタルのフォントを要求する。
本物のスモールキャピタルが利用できない場合，大文字を縮小するなどしてフォントを疑似的に生成すべきです； しかし，それもできない場合には最終手段として，すべて大文字のみで表示してもよい，とされています。
| 値 | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
設定されたフォントファミリの中から，希望するウェイト（画線の太さ）のフォントを要求します。
各値は以下のような意味を持ちます：
100, 200, 300, 400, 500, 600, 700, 800, 900数値が増えるごとに相対的にフォントが重くなるか，少くとも同じ重みのフォントを要求する。
ただし，指定されているフォントファミリに九段階のウェイトが無かったり，UAの実装が不完全だったりすると，異る数値を指定しても太さが変化しない場合があります。詳細なウェイトマッチングのアルゴリズムに就ては，CSS2勧告邦訳 15.5.1を参照のこと。
normal'400' と同等。
（補足：この値はデフォルトからして 'bold' であるか，継承されたウェイトを標準に戻したい場合に用います。）
bold'700' と同等。
bolder継承されたウェイトより重いフォントに対応する数値の中で，最もちかい重みのフォントを要求する。該当するウェイトが存在しなければ，数値を単に一段階（100）大きくするだけでフォントは変更しない。継承値からして '900' であるなら，それより変化しない。
lighter継承されたウェイトより軽いフォントに対応する数値の中で，最もちかい重みのフォントを要求する。該当するウェイトが存在しなければ，数値を単に一段階（100）小さくするだけでフォントは変更しない。継承値からして '100' であるなら，それより変化しない。
| 値 | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
設定されたフォントファミリの中から，希望する字幅のフォントを要求します。
各値は以下のような意味を持ちます：
ultra-condensed, extra-condensed, condensed, semi-condensed,normal, semi-expanded, expanded, extra-expanded, ultra-expanded最も幅の狭い 'ultra-condensed' から順に広くなり，'ultra-expanded' が最も字幅の広いフォントを要求する。
narrower, wider上記の九段階中で，現在継承した字幅よりそれぞれ一段階狭いフォント，一段階広いフォントを要求する。
h1 { font-stretch: ultra-expanded; }
h2 { font-stretch: expanded; }| 値 | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
|---|---|
| 初期値 | medium |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 親要素のフォントサイズに対する割合 |
| メディアグループ | visual |
このプロパティでは，フォントサイズ（これは印刷術でいうem平方と一致する）を指定します。
下記のいづれの指定方法でも，User Agent環境において対応するサイズが無ければ，実効値として最も近い大きさのフォントが採用されます。近似値が採用された場合でも子孫要素には実効値ではなく，算出値が継承される事に注意してください。
（補足：img要素などの置換要素のごとくテキスト内容が存在しない場合でも，'font-size' の指定は無意味ではありません。たとえば 'font-size' の値はem・ex単位を計算する基準になりますし，画像などが利用出来ないときの代替内容も 'font-size' の影響を受けるかもしれません。）
丁度よい文字サイズはユーザやその環境により様々です。ウェブで画面出力を対象とする文書著者は '24pt' や '16px' という風な，固定的なフォントサイズを指定すべきではありません。特定の環境では文字サイズの変更を面倒にさせるかもしれません。文書著者はユーザ設定の基本フォントサイズに対して相対的になるよう，em値やパーセント値などの相対値を活用してください。
〔補足終了〕
各値は以下のような意味を持ちます：
<absolute-size>これらキーワードは，User Agentに拠って計算・保持されているフォントサイズの対照表を参照する。
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
'medium' が標準のサイズで，最小サイズの 'xx-small' から，最大サイズの 'xx-large' へと，CSS2では1.2倍づつ大きくなるような実装を推奨しています。（補足：CSS1では1.5倍づつ大きくなるよう推奨していましたが，倍率が大き過ぎるという理由で見直されました。）
さらに改訂版であるCSS2.1においては，実装経験に拠って，隣接した絶対サイズのキーワード間の固定比率は問題を含むことが證明されている。以前の仕様（CSS1では1.5，CSS2では1.2を提案していた）とは対照的に，本仕様ではそのような固定比率を推奨しない。
としています。そして，HTML font要素の7サイズとの対照表がガイドラインとして提案されました。（参照：CSS21-15.7）
初期値の 'medium' とは，ユーザ好みの設定サイズであり，中庸値として参照するために使用されます。
CSS2.1仕様の実装者は，中庸値である 'medium' の大きさとデヴァイス特性（たとえば解像度など）を比較して，これら絶対サイズのキーワードのために対照倍率を組立てるべきとされます。またメディア毎で，異る対照倍率を必要とするかもしれません。
<relative-size>これらキーワードは，親要素のフォントサイズに対して相対的に対照表を解釈する。
[ larger | smaller ]
親要素に対して，'smaller' は一段階小さく，'larger' は一段階大きくします。
たとえば親要素のフォントサイズが 'medium' と仮定すれば，'larger' という値は 'large' として解釈されます。親のサイズが先に述べた七種類のキーワード以外であるなら，UAに依って異ります； たとえば 'xx-large' よりさらに大きくなるかもしれません。
<length>フォントサイズを定数長で指定する。負の値は不正。
このプロパティ自身においてem・ex単位を用いたならば，例外として親要素が持つフォントサイズの算出値を参照します。ただし文書ルート（HTML文書でのhtml要素）では親が存在し得ないので，初期値である 'medium' の大きさを参照します。
画面出力を対象とする著者は，相対的な単位（em・ex）を活用して，柔軟なスタイル設定を行うべきです。
<percentage>親要素のフォントサイズに対して，その割合を指定する。負の値は不正。
| 値 | <number> | none | inherit |
|---|---|
| 初期値 | none |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，第一候補以外のフォントファミリが採られた場合の，見た感じの大きさを調整します。
活字ケースが二種類ある（たとえばラテンやギリシャ，キリルなどの）用字系では，主観的な見かけのサイズと読みやすさは，'font-size' の値自身より，むしろ 'x-height' に依るところが大きく，さらには両者の縦幅比（フォントサイズをx-heightで割った値）が重要になります。つまり，縦幅比が大きければフォントサイズが小さくても読みやすく，逆に縦幅比が小さければフォントサイズを通常より少し小さくするだけでも読みづらくなります。したがって，フォントサイズだけを見込んで安直に代替フォントを決めると，読みづらい文字を惹き起すでしょう。
たとえば一般的なVerdanaというフォントは0.58の縦幅比を持っています； つまり，フォントサイズ自身を100とすれば，x-heightは58となります。ここで比較のためにTimes New Romanを挙げると，こちらは0.46の縦幅比を持っています。この両者を比較すると，Verdanaのほうが縦幅比がより大きいので，より小さい文字であっても読みやすい傾向にあります。換言すれば，もし同じサイズが選択された場合，Times New Romanの代替としてVerdanaが用いられるとするなら，これは文字が "大きすぎる" という印象をユーザに与えてしまうでしょう。
このプロパティを用いると，フォントセットの第一候補となるフォントのx-heightが以降のフォントでも維持され，見かけ上のサイズを一定に保てられます。延いては見やすさ・読みやすさに繋るでしょう。これは第一候補が欧文フォントの場合に有効的です。
各値は以下のような意味を持ちます：
noneフォントの 'x-height' を維持しない。
<number>縦幅比を実数値で指定する。この数値は，フォントセットの最初の選択肢となるフォントの縦幅比です。
y (a / a') = c
よく使われる欧文フォントの縦幅比・調整例については，CSS2勧告邦訳 15.2.4に詳しく載っております。
p {
font-family: "Verdana", "Times New Roman";
font-size: 24pt;
font-size-adjust: 0.58;
}| 値 | [[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
|---|---|
| 初期値 | 個別のプロパティを参照 |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 'font-size' と 'line-height' のみ指定可 |
| メディアグループ | visual |
このプロパティは簡略化表記であり，フォントにかかわるプロパティを一括して設定します。
ただし，このプロパティで指定できるシステムフォントは個別の 'font-family' では代用できないので，単なる簡略表記プロパティとはやや異ります。このプロパティでは，フォントにかかわる値リストか，単独のシステムフォントの何れかを採り，両者は併用できません。
次の要領で，フォントにかかわる各値を空白類区切りのリストで指定します：
| 順序 | 値 | 備考 |
|---|---|---|
| 1. | <'font-style'> |
（1〜3の値は順不同） |
| 2. | <'font-variant'> |
（1〜3の値は順不同） |
| 3. | <'font-weight'> |
（1〜3の値は順不同） |
| 4. | <'font-size'> |
（省略してはならない） |
| 5. | /<'line-hight'> |
（前方にスラッシュが必要） |
| 6. | <'font-family'> |
（省略してはならない） |
この値リストを用いると，まづかかわるプロパティはすべて初期値にされ，それから指定値にわりあて直されます。なお 'font-stretch' および 'font-size-adjust' の値は，CSS1との後方互換のため指定できません； これらを適用させるには個別に上書きする。
システムフォントは，以下のような値を参照します：
captionmenumessage-boxsmall-captionstatus-barシステムフォントの各値は *-family，*-size，*-weight，*-style など，全特徴が同時に設定されます。必要ならば個別プロパティにより，一部だけの上書きも可能です。示された特質のフォントが存在しない所定のプラットフォームでは，UAが適切な代替フォントを賢い方法（たとえば 'caption' のものを縮小して 'small-caption' に用いるなど）で用意するか，UAが持つデフォルトのフォントを使用すべきです。
h1 { font: italic bold small-caps 170% Times, serif; }
p { font: 100%/1.2 "ＭＳ Ｐ明朝", 平成明朝, serif; }
dfn { font: italic bold 110%/1.2 Georgia, Times, serif; }