[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
(名無しさん)
font に設定します
(escape は除去しますが、大文字・小文字はそのままです)。
以降の処理は行いません (関連 longhand についても何もしません)。font-weight,
font-style,
font-variant の部分です。font-size として解釈します。/ があれば、line-height として解釈します。<number> の場合、その直後にごみがあれば読み飛ばします。
例えば 20em/1""s""eeearaaaaaaa""a"a"
なら font-size: 20em; line-height: 1 で、
それ以降の部分は読み飛ばします。 (この部分の正確な動作は不明です。)line-height には何も
(初期値すら!) 設定しません。これは構文エラーではありません。font-family として解釈します。
解釈できなければ構文エラーです。(名無しさん)
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 で指定したときはそのままなのに。
(名無しさん)
small-caps normal <'font-weight'> (以下略)
はなぜか宣言ごと無視されます (順序を入れ替えたり、
他の値の組み合わせにしたりしても無視されませんが、
なぜかこれだけ)。<'font-size'>
の単位がないと px が補完されますが、
100〜900 の100の倍数で、
かつ小数点が入っていない値 (先導0おk) は
<'font-weight'> とみなされますので、
font: 100 serif のような宣言は無視されます。font-size-adjust や
font-stretch も初期値にします。font-family にその値 (ASCII
小文字、escape 除去済み) が設定されます。
それ以外の longhand には空文字列が設定されます。font-family に直接システム・フォント名を指定しても、
その名前のフォントを探すだけで、システム・フォントとは解釈されないようです。(名無しさん)
font-style、
font-variant、
font-weight の順。font-size の値が与えられていないと、
その前の空白と
後ろの / も含めてなくなってしまいます
(font-size の値がない時点で非妥当)。line-height の値が与えられていないと、
その前の / がなくなるのはよいとして、
その後ろの (font-family の前の)
空白までなくなってしまいます。font-family が指定されていないと、
その前の空白も含めてなくなってしまいます
(font-family 部がないのは非妥当)。currentStyle や
getComputedStyle のとき
font-family は使用値、
bolder を指定したら普通のは
bolder、
currentStyle は
bold、
getComputedStyle は
700)。font-family の値が実はシステム・フォントだとしても気にしない。(名無しさん)
font-size と font-family
が最低限指定されていないと空文字列になる。font-family の値が実はシステム・フォントだとしても気にしない。getComputedStyle では常に空文字列。(名無しさん)
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 を空文字列にします。
(名無しさん)
後に別のフォント名 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, , 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 になる。
一方 Firefox と Quirks Mode Standard によれば 'font' では無単位の奇癖は適用されない。
[909] Chrome では cssText にまとめられるのはシステムフォントが指定されている時だけで、
それ以外のときは個別のプロパティーになります。
[910] Chrome の font では元の指定された値に近いものが、
Chrome の getComputedStyle の font
では省略なしのものが、 Firefox の font では省略なしのものが返ってきます。
[911] Firefox ではシステムフォントの指定は -x-system-font
という直接指定できないプロパティーへの指定とみなされ、他の longhand
は -moz-use-sysyem-font という値になります。なのでそれより前に
longhnad の値を指定していても上書きされます。 Chrome
ではシステムフォントを指定したとき(だけ)は longhand が上書きされず、
他の指定があれば残ります。
[912] Firefox は font-stretch も longhand として初期値を設定するようですが、
<font-stretch> を font の値として設定するのには対応していないようです。
[913] Firefox は inherit や initial
でも -x-system-font を none にします。
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.
900のはずがなぜか800。