* 仕様書 [REFS[ - [2] [CITE@en[CSS Fonts Module Level 4]], [TIME[2021-06-06T01:37:19.000Z]], [TIME[2021-06-06T02:27:44.489Z]] ]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] テスト用: ([[名無しさん]]) [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]]]] になります。 ;; は [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]]'> (以下略)]] はなぜか[[宣言]]ごと[[無視]]されます (順序を入れ替えたり、 他の値の組み合わせにしたりしても[[無視]]されませんが、 なぜかこれだけ)。 ;; - [[奇癖モード]]では [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]])。 ;; どのブラウザも違うけど、 [[Firefox]] 2 が一番近いか。 ([[名無しさん]]) [31] [CODE(CSS)@en[<'[[font-family]]'>]] が [CODE(CSS)@en[[[inherit]]]] : ([[名無しさん]]) [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 後に別の[[フォント名]] 結果は >>33 と同じ。 前に別の[[フォント名]] [[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]] [901] [CITE[User Interface Enhancements]] ( ([TIME[1999-09-16 05:07:02 +09:00]] 版)) [902] [CITE@en[User Interface for CSS3]] ( ([TIME[2000-06-23 03:09:21 +09:00]] 版)) [903] [CITE@en[CSS3 module: Basic User Interface]] ( ([[Tantek Çelik]] 著, [TIME[2002-08-03 07:13:43 +09:00]] 版)) [904] [CITE@en[CSS3 Basic User Interface Module]] ( ([[Tantek Çelik]] 著, [TIME[2003-07-04 02:51:33 +09:00]] 版)) [905] [CITE@en[CSS3 Basic User Interface Module]] ( ([[Tantek Çelik]] 著, [TIME[2004-05-12 02:17:47 +09:00]] 版)) [906] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ( ([[Tantek Çelik]] 著, [TIME[2011-09-29 17:32:08 +09:00]] 版)) [907] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ( ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版)) [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]] 版) ]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]