Edit

Page

Page title:

Page body:

* 仕様書

[REFS[
- [2] [CITE@en[CSS Fonts Module Level 4]], [TIME[2021-06-06T01:37:19.000Z]], [TIME[2021-06-06T02:27:44.489Z]] <https://drafts.csswg.org/css-fonts/#font-prop>
]REFS]

* 歴史

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

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

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

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

[15]
[CODE(CSS example)@en[font: [[-webkit-small-control]];]]
([[名無しさん]] [sage])

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

([[名無しさん]])

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

([[名無しさん]])

[22]
>>21 [CODE(CSS)@en[[[font-weight]]]] で [[CSSOM]]
に現れる値は[[使用値]]ではなく、指定されている値を丸めたものですが、
なぜか 100 の倍数だと 100 少ない値になるようです。
[CODE(CSS)[[[100]]]] のときは [CODE(CSS)[[[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-element> は [CODE(CSS)[[[900]]]] のはずがなぜか
[CODE(CSS)[[[800]]]]。

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

[23]
[[Firefox]] 2:
- ほぼ [[CSS 2.1]] 通りのようです。
- [CODE(CSS)@en[[[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>
- [[奇癖モード]]では [CODE(CSS)@en[<'[[font-size]]'>]]
の[[単位]]がないと [CODE(CSS)@en[[[px]]]] が補完されますが、
[CODE(CSS)[[[100]]]]〜[CODE(CSS)[[[900]]]] の100の[[倍数]]で、
かつ[[小数点]]が入っていない値 ([[先導0]]おk) は
[CODE(CSS)@en[<'[[font-weight]]'>]] とみなされますので、
[CODE(CSS)@en[[[font]]: 100 serif]] のような[[宣言]]は[[無視]]されます。
- [[WinIE 6]] や [[Opera]] 9 とは異なり、 [[CSS 2]] にあって
[[CSS 2.1]] にない [CODE(CSS)@en[[[font-size-adjust]]]] や
[CODE(CSS)@en[[[font-stretch]]]] も[[初期値]]にします。
- [[システム・フォント]]が指定された場合、
[CODE(CSS)@en[[[font-family]]]] にその値 ([[ASCII]]
[[小文字]]、[[escape]] 除去済み) が設定されます。
それ以外の [[longhand]] には[[空文字列]]が設定されます。
-- [CODE(CSS)@en[[[font-family]]]] に直接[[システム・フォント]]名を指定しても、
その名前の[[フォント]]を探すだけで、[[システム・フォント]]とは解釈されないようです。

([[名無しさん]])

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

([[名無しさん]])

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

([[名無しさん]])

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

([[名無しさん]])

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

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

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

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

;; 
<http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSS2Properties>

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

([[名無しさん]])

[31]
[CODE(CSS)@en[<'[[font-family]]'>]] が [CODE(CSS)@en[[[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]
[CODE(CSS)@en[<'[[font-weight]]'>]] が省略された時の値は
[[Opera]] 9 では [CODE(CSS)[[[400]]]]、[[WinIE 6]] と
[[Firefox]] 2 では [CODE(CSS)@en[[[normal]]]] です。
([[名無しさん]])

[33]
>>31 [[Firefox]] 2 は[[宣言]]ごと[[無視]]しますが、
[[Opera]] 9 では (そういう[[フォント]]はないので)
[CODE(CSS)@en[[[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]] も [CODE(CSS)@en[[[font-stretch]]]]
や [CODE(CSS)@en[[[font-size-adjust]]]] には対応していないようなので、
[[Firefox]] 2 や [[CSS 2]] との不整合はありません。
([[名無しさん]])

[36]
>>35 訂正、[[Opera]] 9 は [CODE(CSS)@en[[[font-size-adjust]]]]
を実装しています。なので、
[PRE(CSS example code)[
p {
  font-size-adjust: 3;
  font: 12px serif;
}
]PRE]

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

;; なお、 [[Opera]] は [CODE(CSS)@en[[[font-size-adjust]]]]
を実際に[[レンダリング]]に使っているのか不明。

([[名無しさん]])

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

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

([[名無しさん]])

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[FIG(quote)[
[FIGCAPTION[
[1] [CITE@en[Re: ''''''[''''''css-fonts'''''']'''''' "system" generic font name]]
([[Dean Jackson]] 著, [TIME[2015-07-15 07:54:23 +09:00]] 版)
<https://lists.w3.org/Archives/Public/www-style/2015Jul/0181.html>
]FIGCAPTION]

> 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.

]FIG]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)