* [CODE(CSS)[font-size]] 特性 (CSS) [1] [[CSS]] の [DFN[[CODE(CSS)[font-size]]]] [[特性]]は、 [[フォント]]の ([[文字]]の) 大きさを指定します。 [[#comment]] ** 実装 [5] [CITE[md : Web Design : 実際のところ、どうするのがいいのよ、フォントサイズ!]] [[#comment]] ** アクセス可能性・利用可能性・安全性 [2] '''日本語文字の読みやすさ''': [[日本語文字]]の読みやすさの計測基準を定めた [[JIS S 0032]] という規格があります。この規格は [[CSS]] の主要な[[応用]]である電子ディスプレイを適用範囲外としていますが、 それでも一応の参考とはなるでしょう。 (一般的に言って、 ([[解像度]]等を考慮すると) [[ディスプレイ]]に表示する[[文字]]の大きさは[[紙]]に[[印刷]]する[[文字]]よりも大きくするべきです。) [3] 重要な文章の文字の大きさを通常の大きさと極度に変えるのは避けるべきです。 [[約款]]が細かい字で印刷されるのはよくあることですが(藁)、 当時者双方が平等な立場で契約するつもりがあるのなら、 読者の十分な理解を促すようなデザインを心がけるべきです。 また、読者は重要な注意書きが悪意のある著者によって小さな (時には判読できないような) 文字で書かれていないか常に注意する必要があります。 [[利用者エージェント]]は安全のためにも最低の大きさを[[利用者]]が指定できる機能や、 [[対話的]]な[[利用者エージェント]]であれば[[利用者]]が指定した範囲を拡大したり、 [[文字列]]として複写・保存等をしたりできるようにするべきです。 [7] [CITE@ja[第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro]] ([CODE[2007-02-14 18:59:17 +09:00]] 版) ([[名無しさん]] [WEAK[2007-02-14 10:07:35 +00:00]]) [8] [CITE@ja[第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro]] ([CODE[2007-02-14 19:05:40 +09:00]] 版) ([[名無しさん]] [WEAK[2007-02-14 10:08:14 +00:00]]) [[#comment]] ** テスト - [16] [CODE(CSS)@en[30[[px]]]] - [17] [CODE(CSS)@en[30.[[px]]]] - [18] [CODE(CSS)@en[30.0[[px]]]] - [19] [CODE(CSS)@en[30.1[[px]]]] - [20] [CODE(CSS)@en[.1[[px]]]] - [21] [CODE(CSS)@en[.0[[px]]]] - [22] [CODE(CSS)@en[0[[px]]]] - [23] [CODE(CSS)@en[-10[[px]]]] - [24] [CODE(CSS)@en[-0[[px]]]] - [25] [CODE(CSS)@en[-/**/0[[px]]]] - [26] [CODE(CSS)@en[30p\78]] - [27] [CODE(CSS)@en[30\70x]] - [28] [CODE(CSS)@en[3\30[[px]]]] - [29] [CODE(CSS)@en[30/**/[[px]]]] [30] [[Firefox]] 2 は >>16、>>18-22、>>24、>>26-27 を有効な[[宣言]]として解釈するようです。 [[負]]の[[零]]は[[正規化]]されます。[[小数部]]の[[0]]は最小限に[[正規化]]されます。 ([[名無しさん]]) [31] ([[名無しさん]]) [32] >>31 [[Firefox]] 2 と [[Opera]] 9 は [CODE(CSS)[-.0[[px]]]] 0 と解釈しますが、 [[WinIE 6]] は無視します ([CODE(CSS)[-.]] に対応していないようです)。 ([[名無しさん]]) [33] [[WinIE 6]] は >>16、>>18-19、 >>22、>>24-29 を解釈しますが、それ以外は無視します。 [CODE(CSS)[[[.]]]] が最初や最後に来る[[数]]に対応していないようです。 [[小数部]]は ([[零]]に近い方向に) [[切り捨て]]られるようです。 [CODE(CSS)[-0.9px]] は [[Firefox]] 2 や [[Opera]] 9 では無視されますが、 [[WinIE 6]] では [CODE(CSS)[[[0]]]] とみなされます。 [[escape]] や[[注釈]]はどこでも使えるようです。 [CODE(CSS)[3/**/0px]] や [CODE(CSS)[30p/**/x]]] なんてのまで無視''されません''。 ([[名無しさん]]) [34] >>33 [[負]]の[[零]]は[[符号]]なしに[[正規化]]されます。 ([[名無しさん]]) [35] [[Opera]] 9 は >>16、>>18-22、>>24-25、>>31 を解釈しますが、それ以外は無視します。 [[負]]の[[零]]の[[符号]]は[[正規化]]で除去されません。 [[整数]]で表せない場合、常に[[小数部]]2[[桁]]になるよう[[切り捨て]]・[[正規化]]されます。 ;; [[WinIE 6]] とは異なり、[CODE(CSS)[-0.002px]] は [CODE(CSS)[-0]] とは解釈''されず''、無視されます。 [[負]][[符号]]と[[数]]の間に[[注釈]]を挿入できます。 ;; [[CSS 2.1]] 的に正しいですが、[[Firefox]] も [[WinIE]] も対応していません。 [[単位]]部の [[escape]] には対応していません。 ([[名無しさん]]) [36] [[Firefox]] 2 では値は[[有効数字]]6[[桁]]に[[正規化]]されます。7[[桁]]目で[[四捨五入]]されるようです。冗長な[[0]]は (先頭・最後とも) 捨てられます。[[絶対値]]が大きな数や小さな数は[[指数表示]] ([[科学的記法]]) になってしまいます (逆にそれを[[構文解析]]することはできません)。 ([[名無しさん]]) [37] >>36 あまりにも大きいと [CODE(CSS)[Infinitypx]] になってしまいます。 ([[名無しさん]]) [38] [[Opera]] 9 は大きな数を与えても[[整数]]として出力されますが、 (おそらく[[浮動小数点数]]を使っているせいで) 不正確な数として出てきます。 [CODE(CSS)[990000007341205185086489624576px]] が最大のようです。 ([[名無しさん]]) [39] [[WinIE 6]] では [CODE(CSS)[134217727px]] ([[符号付き]]28ビット[[整数]]の[[最大値]]) が[[最大]]のようです。 ([[名無しさん]]) [40] [CODE(CSS)@en[[[font-size]]: 2[[cm]]]] ([[名無しさん]]) [41] >>40 [[Firefox]] 2, [[Opera]] 9 とも、 [CODE(DOMm)@en[[[getCurrentStyle]]]] の値は [CODE(CSS)@en[[[px]]]] [[単位]]に換算されるようです。 [[Firefox]] では換算後の値も[[有効数字]]7桁目で[[四捨五入]]されているようです。 [[Opera]] は換算後の値を[[整数]]にしているようです ([[切り捨て]]か[[四捨五入]]かは未検証)。 ([[名無しさん]]) [42] >>40 の [CODE(DOMa)@en[[[currentStyle]]]] 版 ([[名無しさん]]) [43] >>42 [[Opera]] 9、[[WinIE 6]] 共、元の [CODE(CSS)@en[[[cm]]]] [[単位]]のままの値がでてきます。 ([[名無しさん]]) [44] >>43 [[WinIE 6]] は [[CSSOM]] の値そのままのようですが、[[Opera]] 9 は[[整数]]になるよう[[切り捨て]]しているようです (少なくても [CODE(CSS)@en[[[cm]]]] と [CODE(CSS)@en[[[in]]]] は)。 ([[名無しさん]]) [45] [CODE(CSS)@en[<[[absolute-size]]>]] のテスト用 [CODE(DOMm)@en[[[getComputedStyle]]]] [CODE(DOMa)@en[[[currentStyle]]]] ([[名無しさん]]) [46] >>45 [[WinIE 6]] の [CODE(DOMa)@en[[[currentStyle]]]] は [CODE(CSS)@en[<[[absolute-size]]>]] がそのまま出るようです。 ([[名無しさん]]) [47] >>45 [[Opera]] 9 - [[著者モード]]・[[無奇癖モード]]・([CODE(DOMm)@en[[[getComputedStyle]]]]/[CODE(DOMa)@en[[[currentStyle]]]]): 43px, 32px, 24px, 22px, 18px, 14px, 11px - [[著者モード]]・[[奇癖モード]]・([CODE(DOMm)@en[[[getComputedStyle]]]]/[CODE(DOMa)@en[[[currentStyle]]]]): 64px, 43px, 32px, 24px, 22px, 18px, 14px - [[ユーザーモード]]・([[奇癖モード]]/[[無奇癖モード]])・[CODE(DOMm)@en[[[getComputedStyle]]]]: 21px, 21px, 21px, 21px, 21px, 21px, 21px - [[ユーザーモード]]・([[奇癖モード]]/[[無奇癖モード]])・[CODE(DOMa)@en[[[currentStyle]]]]: cursive, cursive, cursive, cursive, cursive, cursive, cursive ← なんじゃこりゃ? - ([[著者モード]]/[[ユーザーモード]])・[[アクセシビリティレイアウト]]・([[奇癖モード]]/[[無奇癖モード]])・([CODE(DOMm)@en[[[getComputedStyle]]]]/[CODE(DOMa)@en[[[currentStyle]]]]): 18px, 18px, 18px, 18px, 18px, 18px, 18px ([[名無しさん]]) [48] [[Firefox]] 2 [CODE(DOMm)@en[[[getComputedStyle]]]] ([[無奇癖モード]]/[[奇癖モード]]とも) - 小さく12: 0.266667px, 0.2px, 0.133333px, 0.133333px, 0.0666667px, 0.0666667px, 0.0666667px - 小さく11: 0.6px, 0.466667px, 0.333333px, 0.266667px, 0.2px, 0.133333px, 0.133333px - 小さく10: 0.933333px, 0.666667px, 0.533333px, 0.466667px, 0.333333px, 0.266667px, 0.266667px - 小さく9: 1.26667px, 0.933333px, 0.666667px, 0.6px, 0.466667px, 0.333333px, 0.333333px - 小さく8: 2.2px, 1.66667px, 1.2px, 1.06667px, 0.866667px, 0.666667px, 0.6px - 小さく7: 3.2px, 2.4px, 1.8px, 1.6px, 1.26667px, 1px, 0.866667px - 小さく6: 4.8px, 3.6px, 2.66667px, 2.4px, 1.93333px, 1.46667px, 1.33333px - 小さく5: 7px, 5.26667px, 3.93333px, 3.46667px, 2.8px, 2.13333px, 1.93333px - 小さく4: 10.5333px, 7.86667px, 5.93333px, 5.26667px, 4.26667px, 3.26667px, 2.93333px - 小さく3: 16px, 12px, 9px, 8px, 6.46667px, 5px, 4.46667px - 小さく2: 24px, 18px, 13.4667px, 12px, 9.73333px, 7.46667px, 6.73333px - 小さく1: 28.7333px, 21.5333px, 16.1333px, 14.3333px, 11.6667px, 8.93333px, 8.06667px - 標準: 32px, 24px, 18px, 16px, 13px, 10px, 9px - 大きく1: 38.4px, 28.8px, 21.6px, 19.2px, 15.6px, 12px, 10.8px - 大きく2: 48px, 36px, 27px, 24px, 19.4667px, 15px, 13.4667px - 大きく3: 64px, 48px, 36px, 32px, 26px, 20px, 18px 際限なく大きく/小さくできるのでしょうか? 最小フォントサイズの設定はここには反映されないようです ([[使用値]]に反映される?)。 ([[名無しさん]]) [49] >>47-48 はフォントサイズの設定とかいろいろな要素で変わるものでしょうが、参考までに。 ([[名無しさん]]) [50] [CODE(CSS)@en[<[[absolute-size]]>]] + [CODE(CSS)[<[[relative-size]]>]] テスト用 [CODE(DOMm)@en[[[getComputedStyle]]]] ([[名無しさん]]) [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 [CODE(DOMa)@en[[[currentStyle]]]] 版 ([[名無しさん]]) [53] >>52 は [[WinIE 6]] には長すぎるので: ([[名無しさん]]) [54] >>52-53 [[Opera]] 9 も [[WinIE 6]] も [CODE(CSS)@en[[[smaller]]]] か [CODE(CSS)@en[[[larger]]]] のまま返すようです。 ([[名無しさん]]) [55] [[Opera]] 9 は小さな値 (例えば0) にしても、 [CODE(DOMm)@en[[[getComputedStyle]]]] では[[使用値]]か何かが出てくるようです。 最小フォントサイズ ([CODE(CSS)[[[9px]]]]。設定で変えられるのか、あるいは固定値なのか ([[CSS 2.1]] には9[[画素]]以下はやめたほうがいいという記述がある)) より小さな値を指定しても、最小フォントサイズになってしまいます。 [[Firefox]] 2 でも最小フォントサイズの設定がありますが、 [CODE(DOMm)@en[[[getComputedStyle]]]] はそれと関係ない計算上の値になります。 [[レンダリング]]上は、最小フォントサイズ以下にはなりませんが、 ちょうど 0 になったときは 0 で[[レンダリング]]されます (というかされません)。 [[単位]] [CODE(CSS)[[[em]]]] は [CODE(CSS)@en[[[font-size]]]] [[算出値]]を参照しているはずですが、なぜか[[正]]の値になります ([CODE(CSS)@en[[[medium]]]] を使っている?)。 ;; 検証用 : [[Firefox]] 2 では青い枠だけが見える。 ([[名無しさん]]) [56] [[SVG 1.1]] は [CODE(CSS)@en[[[font-size]]]] に[[無単位]]の値を指定してもよいことにしていますが、 [[Opera]] 9 も [[Firefox]] 2 もそれに対応していません。 ([[名無しさん]]) [[#comment]] ** 関連 [4] [[HTML 3.2]] で導入された表現属性として [CODE(HTMLe)[[[font]]]] 要素と [CODE(HTMLe)[[[basefont]]]] 要素に [CODE(HTMLa)[[[size]]]] 属性がありました。 [[CSS]] の [CODE(CSS)[[[font-size]]]] は [[HTML]] の [CODE(HTMLa)[[[size]]]] 属性の影響を受けていますが、 数値ではなく名前を使うことでより分かりやすくなっています。 また、 [[CSS]] の [CODE(CSS)[[[font-size]]]] 属性は色々な単位付き数値や百分率値が使えるので [[HTML]] にあったものよりかなり強力です。 [[#comment]] ** メモ [6] [CODE(CSS)@en[[[-webkit-xxx-large]]]] ([[名無しさん]] [sage]) [9] [CITE[TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ]] ([CODE[2007-03-31 22:36:42 +09:00]] 版) ([[名無しさん]] [WEAK[2007-04-01 02:18:45 +00:00]]) [10] [CITE['''['''40代〜''']'''IEの「文字のサイズ」は通常どれに設定していますか ? http://q.hatena.ne.jp/1110376466 http://q.hatena.ne.jp/1183454336 - 人力検索はてな]] ([CODE[2007-07-08 01:27:33 +09:00]] 版) ([[名無しさん]]) [11] [CITE[IEの「文字のサイズ」は通常どれに設定していますか ? (関連質問:http://q.hatena.ne.jp/1110376466) - 人力検索はてな]] ([CODE[2007-07-08 01:28:07 +09:00]] 版) ([[名無しさん]]) [12] [CITE@ja[blog in a fog » フォントサイズ指定方法の検証]] ([[Yoji Sanada]] 著, [CODE[2007-07-13 22:25:22 +09:00]] 版) ([[名無しさん]]) [13] [CITE@ja[CSS HappyLifeで述べられているfont-sizeプロパティの値は小さすぎる - 行動記録]] ([[IWAI, Masaharu]] 著, [CODE[2007-07-26 03:35:13 +09:00]] 版) ([[名無しさん]]) [14] [CITE[Business Media 誠:「ブラウザの文字サイズ最大」が半数以上——家庭用PC]] ([CODE[2007-09-14 08:08:37 +09:00]] 版) ([[名無しさん]]) [15] [CITE@ja[覚え書き@kazuhi.to: 文字サイズ変更ウィジェット]] ([CODE[2007-09-23 22:53:26 +09:00]] 版) ([[名無しさん]]) [[#comment]] * メモ [57] [CITE[Bug 84469 – Consider dropping font size quirk]] ( ([TIME[2012-05-04 14:01:49 +09:00]] 版)) [58] [CITE[OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema]] ([TIME[2011-09-29 13:00:00 +09:00]] 版) [59] [CITE@en[Remove 'font-size', 'letter-spacing', and 'word-spacing' sections. · w3c/svgwg@9ae8ea1]] ([TIME[2015-11-06 18:00:15 +09:00]] 版) [60] [CITE@ja[なぜWordのデフォルトフォントサイズは「10.5」なのか? - ねとらぼ]] ([TIME[2017-05-30 17:50:01 +09:00]])