* font 要素型 (HTML, XHTML 1) [4] [[HTML]] の [DFN[[CODE(HTMLe)[font]] 要素型]]の要素は、 文字の大きさや色を変更します。 [5] 仕様書: - [[HTML 4]] -- 15.2.2 Font modifier elements: [CODE(HTMLe)[FONT]] and [CODE(HTMLe)[BASEFONT]] [6] :[[局所名]]:[CODE(HTMLe)[font]] :[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容模型]]:[CODE(SGML)[(%[[inline]];)*]] :出現できる文脈:[CODE(SGML)[%inline]] な文脈 :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態 ,出典 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[color]]]] ,[CODE(SGML)[%[[Color]]]] ,(継承) ,文字色 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[effect]]]] , , ,表示効果 ,非標準 ,[[WebTV]] ,[CODE(HTMLa)[[[face]]]] , ,(継承) ,書体 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)[[[point-size]]]] , , ,文字の大きさ (ポイント単位) ,非標準 ,[CODE(HTMLa)[[[size]]]] , ,(継承) ,文字の大きさ ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[weight]]]] , , ,太さ ,非標準 ,[CODE(XMLa)[[[xmlns]]]] ,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定 ,[[名前空間名]] ,W3C 勧告 ,[[XHTML m12n]] [10] なぜか HTML 4 では [CODE(SGML)[%[[event]]]] 属性集合が含まれていません。 [[#comment]] ** 代替 [8] この要素型は'''[RUBYB[非推奨] [deprecated]]'''です。 代わりに、[[スタイル・シート]]を利用できます。 [9] [[CSS]] なら、 [CODE(HTMLa)[face]] 属性を [SAMP(CSS)[[[font-family]]]] 特性、 [CODE(HTMLa)[color]] 属性を [SAMP(CSS)[[[color]]]] 特性、 [CODE(HTMLa)[size]] 属性を [SAMP(CSS)[[[font-size]]]] 特性で指定できます。 [[#comment]] ** 他との関係 [7] [CODE(HTMLe)[font]] 要素を使わない時や属性を省略した時や [CODE(HTMLa)[size]] 属性で相対指定を行った時の基底 (既定) の値は、 [CODE(HTMLe)[[[basefont]]]] 要素の指定によります。 [[#comment]] ** 不思議解釈 [1] 【[[HP]]】 文字を表示させるための[[タグ]]。 [2] 一説に、表示させる全ての文字列は [CODE(HTMLe)[font]] タグで囲んでおかないといけないらしい。 ([[XUL]] でどの[[箱]]にも属さないものは表示されない、みたいなもんだな。) [3] >>2 でも、当のその解説が [CODE(HTMLe)[font]] タグに囲まれていない文字列を書いていたりするが。 [[#comment]] ** 歴史 [17] [CODE(HTMLe)@en[[[font]]]] [[要素]]は、[[HTML 2.0]] の拡張として [[Netscape Navigator]] が実装しました。 当初は [CODE(HTMLa)@en[[[size]]]] [[属性]]だけが定義されていました。 ;; [CITE[Netscape Navigator Extensions to HTML]] [18] [CITE[IRC logs: w3c / #html-wg / 20070330]] ([CODE[2007-03-31 21:23:37 +09:00]] 版) > # # [20:56] the and style="" issue in HTML5 isn't even remotely decided yet > # # [20:56] the current text is clearly not acceptable to a majority of people and will be changing ([[名無しさん]]) [[#comment]] ** メモ [[#comment]] * メモ [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]]]] の基準になるので)。 ([[名無しさん]])