font-size 特性 (CSS)

[1] CSS の font-size 特性は、 フォントの (文字の) 大きさを指定します。

実装

[5] md : Web Design : 実際のところ、どうするのがいいのよ、フォントサイズ! http://homepage.mac.com/mikihiro/md/web/font.html

アクセス可能性・利用可能性・安全性

[2] 日本語文字の読みやすさ: 日本語文字の読みやすさの計測基準を定めた JIS S 0032 という規格があります。この規格は CSS の主要な応用である電子ディスプレイを適用範囲外としていますが、 それでも一応の参考とはなるでしょう。 (一般的に言って、 (解像度等を考慮すると) ディスプレイに表示する文字の大きさは紙に印刷する文字よりも大きくするべきです。)

[3] 重要な文章の文字の大きさを通常の大きさと極度に変えるのは避けるべきです。 約款が細かい字で印刷されるのはよくあることですが(藁)、 当時者双方が平等な立場で契約するつもりがあるのなら、 読者の十分な理解を促すようなデザインを心がけるべきです。 また、読者は重要な注意書きが悪意のある著者によって小さな (時には判読できないような) 文字で書かれていないか常に注意する必要があります。 利用者エージェントは安全のためにも最低の大きさを利用者が指定できる機能や、 対話的な利用者エージェントであれば利用者が指定した範囲を拡大したり、 文字列として複写・保存等をしたりできるようにするべきです。

[7] 第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro (2007-02-14 18:59:17 +09:00 版) http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/ (名無しさん 2007-02-14 10:07:35 +00:00)

[8] 第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro (2007-02-14 19:05:40 +09:00 版) http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/?ST=swd-design&P=2 (名無しさん 2007-02-14 10:08:14 +00:00)

テスト

[30] Firefox 2 は >>16、>>18-22、>>24、>>26-27 を有効な宣言として解釈するようです。 負の零は正規化されます。小数部の0は最小限に正規化されます。

(名無しさん)

[31] http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%20-.0px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element (名無しさん)

[32] >>31 Firefox 2 と Opera 9 は -.0px 0 と解釈しますが、 WinIE 6 は無視します (-. に対応していないようです)。 (名無しさん)

[33] WinIE 6 は >>16、>>18-19、 >>22、>>24-29 を解釈しますが、それ以外は無視します。

. が最初や最後に来る数に対応していないようです。

小数部は (零に近い方向に) 切り捨てられるようです。 -0.9px は Firefox 2 や Opera 9 では無視されますが、 WinIE 6 では 0 とみなされます。

escape や注釈はどこでも使えるようです。 3/**/0px や 30p/**/x] なんてのまで無視されません。 (名無しさん)

[34] >>33 負の零は符号なしに正規化されます。 (名無しさん)

[35] Opera 9 は >>16、>>18-22、>>24-25、>>31 を解釈しますが、それ以外は無視します。

負の零の符号は正規化で除去されません。

整数で表せない場合、常に小数部2桁になるよう切り捨て・正規化されます。

WinIE 6 とは異なり、-0.002px は -0 とは解釈されず、無視されます。

負符号と数の間に注釈を挿入できます。

CSS 2.1 的に正しいですが、Firefox も WinIE も対応していません。

単位部の escape には対応していません。

(名無しさん)

[36] Firefox 2 では値は有効数字6桁に正規化されます。7桁目で四捨五入されるようです。冗長な0は (先頭・最後とも) 捨てられます。絶対値が大きな数や小さな数は指数表示 (科学的記法) になってしまいます (逆にそれを構文解析することはできません)。

(名無しさん)

[37] >>36 あまりにも大きいと Infinitypx になってしまいます。 (名無しさん)

[38] Opera 9 は大きな数を与えても整数として出力されますが、 (おそらく浮動小数点数を使っているせいで) 不正確な数として出てきます。 990000007341205185086489624576px が最大のようです。 (名無しさん)

[39] WinIE 6 では 134217727px (符号付き28ビット整数の最大値) が最大のようです。 (名無しさん)

[40] font-size: 2cm http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-size%3A%202cm%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20w%20(getComputedStyle%20(this%2C%20null).fontSize)%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20computed%20(%3F)%20value%20of%20the%20'%3Ccode%3Efont-size%3C%2Fcode%3E'%20property.%0A;p=n;x=style-element

(名無しさん)

[41] >>40 Firefox 2, Opera 9 とも、 getCurrentStyle の値は px 単位に換算されるようです。 Firefox では換算後の値も有効数字7桁目で四捨五入されているようです。 Opera は換算後の値を整数にしているようです (切り捨てか四捨五入かは未検証)。 (名無しさん)

[42] >>40 の currentStyle 版 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-size%3A%202cm%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(this.currentStyle.fontSize)%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20computed%20(%3F)%20value%20of%20the%20'%3Ccode%3Efont-size%3C%2Fcode%3E'%20property.%0D%0A;p=n;x=style-element

(名無しさん)

[43] >>42 Opera 9、WinIE 6 共、元の cm 単位のままの値がでてきます。 (名無しさん)

[44] >>43 WinIE 6 は CSSOM の値そのままのようですが、Opera 9 は整数になるよう切り捨てしているようです (少なくても cm と in は)。 (名無しさん)

[45] <absolute-size> のテスト用

getComputedStyle http://suika.fam.cx/gate/2007/cssom/viewer?c=.xx-small%20%7B%20font-size%3A%20xx-small%20%7D%0A.x-small%20%7B%20font-size%3A%20x-small%20%7D%0A.small%20%7B%20font-size%3A%20small%20%7D%0A.medium%20%7B%20font-size%3A%20medium%20%7D%0A.large%20%7B%20font-size%3A%20large%20%7D%0A.x-large%20%7B%20font-size%3A%20x-large%20%7D%0A.xx-large%20%7B%20font-size%3A%20xx-large%20%7D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20w%20(%5B%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B0%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B1%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B2%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B3%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B4%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B5%5D%2C%20null).fontSize%2C%0A%20%20%20%20getComputedStyle%20(document.getElementsByTagName%20('p')%5B6%5D%2C%20null).fontSize%0A%20%20%5D.join%20('%2C%20'))%3B%0A%22%3Ew%3C%2Fbutton%3E%0A%3Cp%20class%3Dxx-large%3Exx-large%0A%3Cp%20class%3Dx-large%3Ex-large%0A%3Cp%20class%3Dlarge%3Elarge%0A%3Cp%20class%3Dmedium%3Emedium%0A%3Cp%20class%3Dsmall%3Esmall%0A%3Cp%20class%3Dx-small%3Ex-small%0A%3Cp%20class%3Dxx-small%3Exx-small%0A;p=n;x=style-element

currentStyle http://suika.fam.cx/gate/2007/cssom/viewer?c=.xx-small%20%7B%20font-size%3A%20xx-small%20%7D%0D%0A.x-small%20%7B%20font-size%3A%20x-small%20%7D%0D%0A.small%20%7B%20font-size%3A%20small%20%7D%0D%0A.medium%20%7B%20font-size%3A%20medium%20%7D%0D%0A.large%20%7B%20font-size%3A%20large%20%7D%0D%0A.x-large%20%7B%20font-size%3A%20x-large%20%7D%0D%0A.xx-large%20%7B%20font-size%3A%20xx-large%20%7D%0D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20w%20(%5B%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B0%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B1%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B2%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B3%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B4%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B5%5D.currentStyle.fontSize%2C%0D%0A%20%20%20%20document.getElementsByTagName%20('p')%5B6%5D.currentStyle.fontSize%2C%0D%0A%20%20%5D.join%20('%2C%20'))%3B%0D%0A%22%3Ew%3C%2Fbutton%3E%0D%0A%3Cp%20class%3Dxx-large%3Exx-large%0D%0A%3Cp%20class%3Dx-large%3Ex-large%0D%0A%3Cp%20class%3Dlarge%3Elarge%0D%0A%3Cp%20class%3Dmedium%3Emedium%0D%0A%3Cp%20class%3Dsmall%3Esmall%0D%0A%3Cp%20class%3Dx-small%3Ex-small%0D%0A%3Cp%20class%3Dxx-small%3Exx-small%0D%0A;p=n;x=style-element

(名無しさん)

[46] >>45 WinIE 6 の currentStyle は <absolute-size> がそのまま出るようです。 (名無しさん)

[47] >>45 Opera 9

(名無しさん)

[48] Firefox 2 getComputedStyle (無奇癖モード/奇癖モードとも)

際限なく大きく/小さくできるのでしょうか?

最小フォントサイズの設定はここには反映されないようです (使用値に反映される?)。 (名無しさん)

[49] >>47-48 はフォントサイズの設定とかいろいろな要素で変わるものでしょうが、参考までに。 (名無しさん)

[50] <absolute-size> + <relative-size> テスト用

getComputedStyle http://suika.fam.cx/gate/2007/cssom/viewer?c=.xx-small%20%7B%20font-size%3A%20xx-small%20%7D%0A.x-small%20%7B%20font-size%3A%20x-small%20%7D%0A.small%20%7B%20font-size%3A%20small%20%7D%0A.medium%20%7B%20font-size%3A%20medium%20%7D%0A.large%20%7B%20font-size%3A%20large%20%7D%0A.x-large%20%7B%20font-size%3A%20x-large%20%7D%0A.xx-large%20%7B%20font-size%3A%20xx-large%20%7D%0A.larger%20%7B%20font-size%3A%20larger%20%7D%0A.smaller%20%7B%20font-size%3A%20smaller%20%7D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20function%20default0%20(i)%20%7B%20return%20document.getElementsByTagName%20('p')%5Bi%5D%20%7D%0A%20%20function%20larger1%20(i)%20%7B%20return%20document.getElementsByTagName%20('p')%5Bi%5D.getElementsByTagName%20('span')%5B0%5D%20%7D%0A%20%20function%20smaller1%20(i)%20%7B%20return%20document.getElementsByTagName%20('p')%5Bi%5D.getElementsByTagName%20('span')%5B2%5D%20%7D%0A%20%20w%20(%5B%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(0)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(0)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(0)%2C%20null).fontSize%5D.join%20('%3B')%2C%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(1)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(1)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(1)%2C%20null).fontSize%5D.join%20('%3B')%2C%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(2)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(2)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(2)%2C%20null).fontSize%5D.join%20('%3B')%2C%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(3)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(3)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(3)%2C%20null).fontSize%5D.join%20('%3B')%2C%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(4)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(4)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(4)%2C%20null).fontSize%5D.join%20('%3B')%2C%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(5)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(5)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(5)%2C%20null).fontSize%5D.join%20('%3B')%2C%0A%20%20%20%20%5BgetComputedStyle%20(default0%20(6)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(larger1%20(6)%2C%20null).fontSize%2C%0A%20%20%20%20%20getComputedStyle%20(smaller1%20(6)%2C%20null).fontSize%5D.join%20('%3B')%0A%20%20%5D.join%20('%2C%20'))%3B%0A%22%3Ew%3C%2Fbutton%3E%0A%3Cp%20class%3Dxx-large%3Exx-large%20%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cp%20class%3Dx-large%3Ex-large%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cp%20class%3Dlarge%3Elarge%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cp%20class%3Dmedium%3Emedium%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cp%20class%3Dsmall%3Esmall%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cp%20class%3Dx-small%3Ex-small%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A%3Cp%20class%3Dxx-small%3Exx-small%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0A;p=n;x=style-element

(名無しさん)

[51] >>50

Firefox 2: 32px;48px;24px, 24px;32px;18px, 18px;24px;16px, 16px;18px;13px, 13px;16px;10px, 10px;13px;9px, 9px;10px;8px

Opera 9 無奇癖モード: 43px;51px;34px, 32px;38px;25px, 24px;28px;19px, 22px;26px;17px, 18px;21px;14px, 14px;16px;11px, 11px;13px;9px

Opera 9 奇癖モード: 64px;76px;51px, 43px;51px;34px, 32px;38px;25px, 24px;28px;19px, 22px;26px;17px, 18px;21px;14px, 14px;16px;11px

Opera はおかしくないか? (名無しさん)

[52] >>50 currentStyle 版 http://suika.fam.cx/gate/2007/cssom/viewer?c=.xx-small%20%7B%20font-size%3A%20xx-small%20%7D%0D%0A.x-small%20%7B%20font-size%3A%20x-small%20%7D%0D%0A.small%20%7B%20font-size%3A%20small%20%7D%0D%0A.medium%20%7B%20font-size%3A%20medium%20%7D%0D%0A.large%20%7B%20font-size%3A%20large%20%7D%0D%0A.x-large%20%7B%20font-size%3A%20x-large%20%7D%0D%0A.xx-large%20%7B%20font-size%3A%20xx-large%20%7D%0D%0A.larger%20%7B%20font-size%3A%20larger%20%7D%0D%0A.smaller%20%7B%20font-size%3A%20smaller%20%7D%0D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20function%20default0%20(i)%20%7B%20return%20document.getElementsByTagName%20('p')%5Bi%5D%20%7D%0D%0A%20%20function%20larger1%20(i)%20%7B%20return%20document.getElementsByTagName%20('p')%5Bi%5D.getElementsByTagName%20('span')%5B0%5D%20%7D%0D%0A%20%20function%20smaller1%20(i)%20%7B%20return%20document.getElementsByTagName%20('p')%5Bi%5D.getElementsByTagName%20('span')%5B2%5D%20%7D%0D%0A%20%20w%20(%5B%0D%0A%20%20%20%20%5Bdefault0%20(0).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(0).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(0).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%20%20%5Bdefault0%20(1).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(1).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(1).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%20%20%5Bdefault0%20(2).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(2).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(2).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%20%20%5Bdefault0%20(3).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(3).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(3).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%20%20%5Bdefault0%20(4).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(4).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(4).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%20%20%5Bdefault0%20(5).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(5).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(5).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%20%20%5Bdefault0%20(6).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20larger1%20(6).currentStyle.fontSize%2C%0D%0A%20%20%20%20%20smaller1%20(6).currentStyle.fontSize%5D.join%20('%3B')%2C%0D%0A%20%20%5D.join%20('%2C%20'))%3B%0D%0A%22%3Ew%3C%2Fbutton%3E%0D%0A%3Cp%20class%3Dxx-large%3Exx-large%20%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3Cp%20class%3Dx-large%3Ex-large%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3Cp%20class%3Dlarge%3Elarge%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3Cp%20class%3Dmedium%3Emedium%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3Cp%20class%3Dsmall%3Esmall%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3Cp%20class%3Dx-small%3Ex-small%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3Cp%20class%3Dxx-small%3Exx-small%20%3Cspan%20class%3Dlarger%3Elarger%20%3Cspan%20class%3Dlarger%3Elarger%3C%2Fspan%3E%3C%2Fspan%3E%20%3Cspan%20class%3Dsmaller%3Esmaller%20%3Cspan%20class%3Dsmaller%3Esmaller%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A;p=n;x=style-element

(名無しさん)

[53] >>52 は WinIE 6 には長すぎるので: http://suika.fam.cx/gate/2007/cssom/viewer?c=.g%7Bfont-size%3Axx-small%7D.f%7Bfont-size%3Ax-small%7D.e%7Bfont-size%3Asmall%7D.d%7Bfont-size%3Amedium%7D.c%7Bfont-size%3Alarge%7D.b%7Bfont-size%3Ax-large%7D.a%7Bfont-size%3Axx-large%7D.h%7Bfont-size%3Alarger%7D.i%7Bfont-size%3Asmaller%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22function%20x(i)%7Breturn%20document.getElementsByTagName('p')%5Bi%5D%7Dfunction%20y(i)%7Breturn%20x(i).getElementsByTagName('u')%5B0%5D%7Dfunction%20z(i)%7Breturn%20x(i).getElementsByTagName('u')%5B2%5D%7Dfunction%20v(i)%7Breturn%5Bx(i).currentStyle.fontSize%2Cy(i).currentStyle.fontSize%2Cz(i).currentStyle.fontSize%5D.join('%3B')%7Dw(%5Bv(0)%2Cv(1)%2Cv(2)%2Cv(3)%2Cv(4)%2Cv(5)%2Cv(6)%5D.join('%2C%20'))%22value%3Dw%3E%3Cp%20class%3Da%3Exx-large%20%3Cu%20class%3Dh%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E%3Cp%20class%3Db%3Ex-large%20%3Cu%20class%3Dh%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E%3Cp%20class%3Dc%3Elarge%20%3Cu%20class%3Dh%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E%3Cp%20class%3Dd%3Emedium%20%3Cu%20class%3Dh%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E%3Cp%20class%3De%3Esmall%20%3Cu%20class%3Dh%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E%3Cp%20class%3Df%3Ex-small%20%3Cu%20class%3Dlarger%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E%3Cp%20class%3Dg%3Exx-small%20%3Cu%20class%3Dlarger%3Elarger%20%3Cu%20class%3Dh%3Elarger%3C%2Fu%3E%3C%2Fu%3E%20%3Cu%20class%3Di%3Esmaller%20%3Cu%20class%3Di%3Esmaller%3C%2Fu%3E%3C%2Fu%3E;p=n;x=style-element (名無しさん)

[54] >>52-53 Opera 9 も WinIE 6 も smaller か larger のまま返すようです。 (名無しさん)

[55] Opera 9 は小さな値 (例えば0) にしても、 getComputedStyle では使用値か何かが出てくるようです。 最小フォントサイズ (9px。設定で変えられるのか、あるいは固定値なのか (CSS 2.1 には9画素以下はやめたほうがいいという記述がある)) より小さな値を指定しても、最小フォントサイズになってしまいます。

Firefox 2 でも最小フォントサイズの設定がありますが、 getComputedStyle はそれと関係ない計算上の値になります。 レンダリング上は、最小フォントサイズ以下にはなりませんが、 ちょうど 0 になったときは 0 でレンダリングされます (というかされません)。 単位 em は font-size 算出値を参照しているはずですが、なぜか正の値になります (medium を使っている?)。

検証用 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-size%3A%200%3B%0A%7D%0Aspan%20%7B%0A%20%20display%3A%20block%3B%0A%20%20border%3A%20solid%201em%20blue%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20w(getComputedStyle%20(document.getElementsByTagName%20('span')%5B0%5D%2C%20null).borderTopWidth)%0A%22%3E%0A%3Cp%3Exxx%3Cspan%3Exxx;p=n;x=style-element: Firefox 2 では青い枠だけが見える。

(名無しさん)

[56] SVG 1.1 は font-size に無単位の値を指定してもよいことにしていますが、 Opera 9 も Firefox 2 もそれに対応していません。 (名無しさん)

関連

[4] HTML 3.2 で導入された表現属性として font 要素と basefont 要素に size 属性がありました。 CSS の font-size は HTML の size 属性の影響を受けていますが、 数値ではなく名前を使うことでより分かりやすくなっています。 また、 CSS の font-size 属性は色々な単位付き数値や百分率値が使えるので HTML にあったものよりかなり強力です。

メモ

[6] -webkit-xxx-large (名無しさん [sage])

[9] TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ (2007-03-31 22:36:42 +09:00 版) http://d.hatena.ne.jp/aratako0/20070331/p1 (名無しさん 2007-04-01 02:18:45 +00:00)

[10] [40代〜]IEの「文字のサイズ」は通常どれに設定していますか ? http://q.hatena.ne.jp/1110376466 http://q.hatena.ne.jp/1183454336 - 人力検索はてな (2007-07-08 01:27:33 +09:00 版) http://q.hatena.ne.jp/1183455736 (名無しさん)

[11] IEの「文字のサイズ」は通常どれに設定していますか ? (関連質問:http://q.hatena.ne.jp/1110376466) - 人力検索はてな (2007-07-08 01:28:07 +09:00 版) http://q.hatena.ne.jp/1183454336 (名無しさん)

[12] blog in a fog &#187; フォントサイズ指定方法の検証 (Yoji Sanada 著, 2007-07-13 22:25:22 +09:00 版) http://blog.inafog.jp/archives/225 (名無しさん)

[13] CSS HappyLifeで述べられているfont-sizeプロパティの値は小さすぎる - 行動記録 (IWAI, Masaharu 著, 2007-07-26 03:35:13 +09:00 版) http://iwaim.beering.be/2007/03/body.html (名無しさん)

[14] Business Media 誠:「ブラウザの文字サイズ最大」が半数以上——家庭用PC (2007-09-14 08:08:37 +09:00 版) http://bizmakoto.jp/makoto/articles/0709/13/news036.html (名無しさん)

[15] 覚え書き@kazuhi.to: 文字サイズ変更ウィジェット (2007-09-23 22:53:26 +09:00 版) http://kidachi.kazuhi.to/blog/archives/002378.html (名無しさん)

メモ

[57] Bug 84469 – Consider dropping font size quirk ( ( 版)) https://bugs.webkit.org/show_bug.cgi?id=84469

[58] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a20_183fo_font-size

[59] Remove 'font-size', 'letter-spacing', and 'word-spacing' sections. · w3c/svgwg@9ae8ea1 ( 版) https://github.com/w3c/svgwg/commit/9ae8ea1542b360b5caa65f8f8d7bb75d9e2aa6d2

[60] なぜWordのデフォルトフォントサイズは「10.5」なのか? - ねとらぼ () http://nlab.itmedia.co.jp/nl/articles/1705/29/news020.html