仕様書

歴史

[11] font: -moz-field; (名無しさん [sage])

[12] font: medium -moz-fixed; (名無しさん [sage])

[13] font: -moz-list; (名無しさん [sage])

[14] font: -moz-button; (名無しさん [sage])

[15] font: -webkit-small-control; (名無しさん [sage])

[16] font: -webkit-small-control; (名無しさん [sage])

[19] テスト用: http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font%3A%20menu%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A;h=%3Cp%3E%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20s%20%3D%20sd%20()%3B%0D%0A%20%20w%20(%5B'font'%2C%20s.font%2C%20'font-family'%2C%20s.fontFamily%2C%20'font-style'%2C%20s.fontStyle%2C%20'font-variant'%2C%20s.fontVariant%2C%20'font-weight'%2C%20s.fontWeight%2C%20'font-size'%2C%20s.fontSize%2C%20'line-height'%2C%20s.lineHeight%5D)%3B%0D%0A%22%3ECSSOM%3C%2Fbutton%3E%0D%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20s%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0D%0A%20%20w%20(%5B'font'%2C%20s.font%2C%20'font-family'%2C%20s.fontFamily%2C%20'font-style'%2C%20s.fontStyle%2C%20'font-variant'%2C%20s.fontVariant%2C%20'font-weight'%2C%20s.fontWeight%2C%20'font-size'%2C%20s.fontSize%2C%20'line-height'%2C%20s.lineHeight%5D)%3B%0D%0A%22%3E%3Ccode%3EgetComputedStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0D%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20s%20%3D%20el.currentStyle%3B%0D%0A%20%20w%20(%5B'font'%2C%20s.font%2C%20'font-family'%2C%20s.fontFamily%2C%20'font-style'%2C%20s.fontStyle%2C%20'font-variant'%2C%20s.fontVariant%2C%20'font-weight'%2C%20s.fontWeight%2C%20'font-size'%2C%20s.fontSize%2C%20'line-height'%2C%20s.lineHeight%5D)%3B%0D%0A%22%3E%3Ccode%3EcurrentStyle%3C%2Fcode%3E%3C%2Fbutton%3E;p=n;x=style-element

(名無しさん)

[20] WinIE 6 の構文解析:

1. 空白を0以上読み飛ばします。
2. 次の値としてシステム・フォント (ASCII 大文字/小文字一致) が指定されていれば (そしてそれ以降に空白以外何もなければ)、 それを font に設定します (escape は除去しますが、大文字・小文字はそのままです)。 以降の処理は行いません (関連 longhand についても何もしません)。
3. まず、font-weight, font-style, font-variant の部分です。
   1. 3つのうちいずれか1つで (WinIE 6 が) 解釈可能な値なら、 該当する特性にその値を設定します。
      1. これによって3つの特性がすべて明示的に設定されれば、 次へ進みます。
      2. 100〜900 は font-weight の値とみなされますが、 小数点が含まれる場合やそれ以外の <number> の場合には font-weight とはみなされません。
   2. normal なら無視します。
   3. それ以外の値の場合は次へ進みます。
   4. 空白を読み飛ばし、繰り返します。ただし1つも空白がなければ構文エラーです。
4. 空白を読み飛ばします (これ以前になにかあったら1つ以上必要で、 なければ構文エラーです)。
5. 次の値を font-size として解釈します。
   1. 奇癖モードでは単位なしの <number> は px 単位とみなされます (CSSOM に現れる値は単位補完済み)。
   2. 解釈できなければ構文エラーです。
6. 空白を0以上読み飛ばします。
7. / があれば、
   1. 注意: ここで空白を読み飛ばしません (注釈は通常通り読み飛ばします)。
   2. line-height として解釈します。
      1. <number> の場合、その直後にごみがあれば読み飛ばします。 例えば 20em/1""s""eeearaaaaaaa""a"a" なら font-size: 20em; line-height: 1 で、 それ以降の部分は読み飛ばします。 (この部分の正確な動作は不明です。)
   3. 解釈できなければ line-height には何も (初期値すら!) 設定しません。これは構文エラーではありません。
   4. 空白を読み飛ばします。1つ以上なければ構文エラーです。
8. 残りを font-family として解釈します。 解釈できなければ構文エラーです。
9. 以上で設定しなかった longhand には初期値を設定します。
10. ただし、構文エラーがあるときは通例通り宣言ごと無視されます。
11. また、他の特性同様、注釈は値の途中だろうと無視されます。

(名無しさん)

[21] Opera 9 の構文解析:

• おそらくほぼ CSS 2.1 通りです。
• font-family、 font-weight がCSSOM に現れる値が使用値 (?) になるのは longhand のときと同じです。
• システム・フォントが指定されたときには font-family にその値が入ります。 他の longhand はそのままです (初期値を設定しません)。
  • なお、 font-family: menu や font: 1px menu のように <'font-family'> としてシステム・フォントを指定しようとしても、 システム・フォントではなく、実際のフォント名として解釈しようとするらしく、 (システム上に存在しないので) 空文字列になります。
• 無奇癖モード、奇癖モードとも、 font-size として <number> を指定できません (0 も駄目です)。
• font-weight で 100 以上 900 以下のどんな値も指定できるのは longhand と同じ。

(名無しさん)

[22] >>21 font-weight で CSSOM に現れる値は使用値ではなく、指定されている値を丸めたものですが、 なぜか 100 の倍数だと 100 少ない値になるようです。 100 のときは 400 になります。

また、 font: 1em serif のような共通族名は使用値 (?) に置き換えられます。 font-family: serif と longhand で指定したときはそのままなのに。 (名無しさん)

[23] Firefox 2:

• ほぼ CSS 2.1 通りのようです。
• small-caps normal <'font-weight'> (以下略) はなぜか宣言ごと無視されます (順序を入れ替えたり、 他の値の組み合わせにしたりしても無視されませんが、 なぜかこれだけ)。http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font%3A%20small-caps%20normal%20bolder%201em%20serif%3B%0A%7D%0A;h=%3Cp%3E%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20s%20%3D%20sd%20()%3B%0A%20%20w%20(%5B'font'%2C%20s.font%2C%20'font-family'%2C%20s.fontFamily%2C%20'font-style'%2C%20s.fontStyle%2C%20'font-variant'%2C%20s.fontVariant%2C%20'font-weight'%2C%20s.fontWeight%2C%20'font-size'%2C%20s.fontSize%2C%20'line-height'%2C%20s.lineHeight%5D)%3B%0A%22%3ECSSOM%3C%2Fbutton%3E%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20s%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0A%20%20w%20(%5B'font'%2C%20s.font%2C%20'font-family'%2C%20s.fontFamily%2C%20'font-style'%2C%20s.fontStyle%2C%20'font-variant'%2C%20s.fontVariant%2C%20'font-weight'%2C%20s.fontWeight%2C%20'font-size'%2C%20s.fontSize%2C%20'line-height'%2C%20s.lineHeight%5D)%3B%0A%22%3E%3Ccode%3EgetComputedStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20s%20%3D%20el.currentStyle%3B%0A%20%20w%20(%5B'font'%2C%20s.font%2C%20'font-family'%2C%20s.fontFamily%2C%20'font-style'%2C%20s.fontStyle%2C%20'font-variant'%2C%20s.fontVariant%2C%20'font-weight'%2C%20s.fontWeight%2C%20'font-size'%2C%20s.fontSize%2C%20'line-height'%2C%20s.lineHeight%5D)%3B%0A%22%3E%3Ccode%3EcurrentStyle%3C%2Fcode%3E%3C%2Fbutton%3E;p=n;x=style-element
• 奇癖モードでは <'font-size'> の単位がないと px が補完されますが、 100〜900 の100の倍数で、 かつ小数点が入っていない値 (先導0おk) は <'font-weight'> とみなされますので、 font: 100 serif のような宣言は無視されます。
• WinIE 6 や Opera 9 とは異なり、 CSS 2 にあって CSS 2.1 にない font-size-adjust や font-stretch も初期値にします。
• システム・フォントが指定された場合、 font-family にその値 (ASCII 小文字、escape 除去済み) が設定されます。 それ以外の longhand には空文字列が設定されます。
  • font-family に直接システム・フォント名を指定しても、 その名前のフォントを探すだけで、システム・フォントとは解釈されないようです。

(名無しさん)

[24] DOM属性 font:

• Opera 9
  • (初期値だろうと) 値が指定されているもの (算出値の場合は全部) を全部書き出します。
  • 最初の3つは font-style、 font-variant、 font-weight の順。
  • font-size の値が与えられていないと、 その前の空白と 後ろの / も含めてなくなってしまいます (font-size の値がない時点で非妥当)。
  • line-height の値が与えられていないと、 その前の / がなくなるのはよいとして、 その後ろの (font-family の前の) 空白までなくなってしまいます。
  • font-family が指定されていないと、 その前の空白も含めてなくなってしまいます (font-family 部がないのは非妥当)。
  • 従ってどの longhand もなければ空文字列になります。
  • それぞれの値は longhand に対応する DOM属性の値のようです (例えば currentStyle や getComputedStyle のとき font-family は使用値、 bolder を指定したら普通のは bolder、 currentStyle は bold、 getComputedStyle は 700)。
  • font-family の値が実はシステム・フォントだとしても気にしない。

(名無しさん)

[25] >>24 Firefox 2

• (初期値だろうと) 値が与えられているものを書くのは >>24 と同じ。
• 順序も >>24 と同じ。
• font-size と font-family が最低限指定されていないと空文字列になる。
• font-family の値が実はシステム・フォントだとしても気にしない。
• getComputedStyle では常に空文字列。

(名無しさん)

[26] >>24 WinIE 6

• 5特性すべてに値が与えられていない限り、空文字列。
• 初期値以外の値なら現れる。 font-size と font-family は常に現れる。
• 順序は font-weight、 font-style、 font-variant。
• currentStyle には存在しない (undefined)。
• 各値を SPACE 1つで区切る。 (font-sizeとline-height の間は / 1つ。)

(名無しさん)

[27] 全体的にどのブラウザもどこかがおかしいですが、 そのなかで一番まともそうに見えるのが WinIE 6 だという稀有な例です。 (名無しさん)

[28] やっぱり >>27 は取り消し (構文解析のあれはひどいだろう)。 (名無しさん)

[29] longhand はカスケーディングの前に shorthand に分解する (最低でも分解したかのように扱う) 必要があるのですが、 システム・フォントが指定されるとそういうわけにもいかなくなります。 内部的な特殊な値で (font-family: -x-menu-font-family; font-size: -x-menu-font-size のように) 扱うとしても、算出値の算出時に実際の値に置換する必要があります (font-size は em の基準になるので)。 (名無しさん)

[30] システム・フォントが指定されたら longhand はすべて空文字列になるらしい (ただし should)。

どのブラウザも違うけど、 Firefox 2 が一番近いか。

(名無しさん)

[31] <'font-family'> が inherit: http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font%3A%2016px%20inherit%3B%0A%7D%0A;h=;p=n;x=style-element;i=html-div

(名無しさん)

[32] <'font-weight'> が省略された時の値は Opera 9 では 400、WinIE 6 と Firefox 2 では normal です。 (名無しさん)

[33] >>31 Firefox 2 は宣言ごと無視しますが、 Opera 9 では (そういうフォントはないので) font-family を空文字列にします。 (名無しさん)

[34] >>31

後に別のフォント名 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font%3A%2016px%20inherit%2C%20a%3B%0A%7D%0A;h=;p=n;x=style-element;i=html-div

結果は >>33 と同じ。

前に別のフォント名 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font%3A%2016px%20a%2C%20inherit%3B%0A%7D%0A;h=;p=n;x=style-element;i=html-div

Firefox 2 は無視しなくなります。 Opera 9 は >>33 と同じ。 (名無しさん)

[35] Opera 9 も WinIE 6 も font-stretch や font-size-adjust には対応していないようなので、 Firefox 2 や CSS 2 との不整合はありません。 (名無しさん)

[36] >>35 訂正、Opera 9 は font-size-adjust を実装しています。なので、

p {
  font-size-adjust: 3;
  font: 12px serif;
}

は Firefox と Opera で違った結果になります。

(名無しさん)

[37] Firefox 2 の font DOM属性は、 font-size-adjust や font-stretch と無関係に値を返すようです。 (名無しさん)

[38] CSS 2 は font に inherit を指定したら font-size-adjust や font-stretch がどうなるのか明記していませんが、 Firefox 2 は inherit を設定します。

(名無しさん)

[3] HTMLayout CSS support map, 2024-08-17T08:41:34.000Z, 2010-11-29T13:53:25.140Z https://web.archive.org/web/20101129135248/http://www.terrainformatica.com/htmlayout/cssmap.whtm

[901] User Interface Enhancements ( (1999-09-16 05:07:02 +09:00 版)) http://www.w3.org/TR/1999/WD-css3-userint-19990916#font

[902] User Interface for CSS3 ( (2000-06-23 03:09:21 +09:00 版)) http://www.w3.org/TR/2000/WD-css3-userint-20000216#font

[903] CSS3 module: Basic User Interface ( (Tantek Çelik 著, 2002-08-03 07:13:43 +09:00 版)) http://www.w3.org/TR/2002/WD-css3-ui-20020802/#system0

[904] CSS3 Basic User Interface Module ( (Tantek Çelik 著, 2003-07-04 02:51:33 +09:00 版)) http://www.w3.org/TR/2003/WD-css3-ui-20030703/#system0

[905] CSS3 Basic User Interface Module ( (Tantek Çelik 著, 2004-05-12 02:17:47 +09:00 版)) http://www.w3.org/TR/2004/CR-css3-ui-20040511/#system0

[906] CSS Basic User Interface Module Level 3 (CSS3 UI) ( (Tantek Çelik 著, 2011-09-29 17:32:08 +09:00 版)) http://dev.w3.org/csswg/css3-ui/#system-fonts

[907] CSS Basic User Interface Module Level 3 (CSS3 UI) ( (Tantek Çelik 著, 2012-01-13 20:03:30 +09:00 版)) http://www.w3.org/TR/2012/WD-css3-ui-20120117/#changes-list

[908] Chrome だと 12 serif みたいなので font-size: 12px になる。 一方 Firefox と Quirks Mode Standard によれば 'font' では無単位の奇癖は適用されない。 2013-09-02T09:00:15.000Z

[909] Chrome では cssText にまとめられるのはシステムフォントが指定されている時だけで、 それ以外のときは個別のプロパティーになります。 2013-09-08T06:48:21.100Z

[910] Chrome の font では元の指定された値に近いものが、 Chrome の getComputedStyle の font では省略なしのものが、 Firefox の font では省略なしのものが返ってきます。 2013-09-08T06:49:44.700Z

[911] Firefox ではシステムフォントの指定は -x-system-font という直接指定できないプロパティーへの指定とみなされ、他の longhand は -moz-use-sysyem-font という値になります。なのでそれより前に longhnad の値を指定していても上書きされます。 Chrome ではシステムフォントを指定したとき(だけ)は longhand が上書きされず、 他の指定があれば残ります。 2013-09-08T06:51:50.300Z

[912] Firefox は font-stretch も longhand として初期値を設定するようですが、 <font-stretch> を font の値として設定するのには対応していないようです。2013-09-08T07:02:57.500Z

[913] Firefox は inherit や initial でも -x-system-font を none にします。 2013-09-08T08:36:59.600Z