* 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
([[名無しさん]])
[39]
[CITE@en[ and style="" in HTML5]] ([[Ian Hickson]] 著, [TIME[2008-04-29 21:21:45 +09:00]] 版)
([[名無しさん]])
[[#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]]]]
の基準になるので)。
([[名無しさん]])
[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]]]] を設定します。
([[名無しさん]])
[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]] 版))