font

'font' プロパティー (CSS)

仕様書

歴史

[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. 100900font-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 の構文解析:

(名無しさん)

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

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font%3A%20900%201em%20serif%3B%0D%0A%7D;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-element900 のはずがなぜか 800

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

[23] Firefox 2:

(名無しさん)

[24] DOM属性 font:

(名無しさん)

[25] >>24 Firefox 2

(名無しさん)

[26] >>24 WinIE 6

(名無しさん)

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

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

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

[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 では 400WinIE 6Firefox 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 6font-stretchfont-size-adjust には対応していないようなので、 Firefox 2 や CSS 2 との不整合はありません。 (名無しさん)

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

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

FirefoxOpera で違った結果になります。

なお、 Operafont-size-adjust を実際にレンダリングに使っているのか不明。

(名無しさん)

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

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

(名無しさん)

[3] HTMLayout CSS support map, , https://web.archive.org/web/20101129135248/http://www.terrainformatica.com/htmlayout/cssmap.whtm

[901] User Interface Enhancements ( ( 版)) http://www.w3.org/TR/1999/WD-css3-userint-19990916#font

[902] User Interface for CSS3 ( ( 版)) http://www.w3.org/TR/2000/WD-css3-userint-20000216#font

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

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

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

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

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

[908] Chrome だと 12 serif みたいなので font-size: 12px になる。 一方 FirefoxQuirks Mode Standard によれば 'font' では無単位の奇癖は適用されない。

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

[910] Chromefont では元の指定された値に近いものが、 ChromegetComputedStylefont では省略なしのものが、 Firefoxfont では省略なしのものが返ってきます。

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

[912] Firefoxfont-stretchlonghand として初期値を設定するようですが、 <font-stretch>font の値として設定するのには対応していないようです。

[913] Firefoxinheritinitial でも -x-system-fontnone にします。

[1] Re: [css-fonts] "system" generic font name (Dean Jackson 著, 版) https://lists.w3.org/Archives/Public/www-style/2015Jul/0181.html

Aside: on iOS we do have similar font keywords like your -mozilla-foo. For example, -apple-system-headline1, which provides a family, weight, style, size, etc. These also dynamically respond to what the user chooses in their accessibility settings.