/
454.txt
371 lines (274 loc) · 31.1 KB
/
454.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
* [CODE(CSS)[font-size]] 特性 (CSS)
[1] [[CSS]] の [DFN[[CODE(CSS)[font-size]]]] [[特性]]は、
[[フォント]]の ([[文字]]の) 大きさを指定します。
[[#comment]]
** 実装
[5]
[CITE[md : Web Design : 実際のところ、どうするのがいいのよ、フォントサイズ!]]
<http://homepage.mac.com/mikihiro/md/web/font.html>
[[#comment]]
** アクセス可能性・利用可能性・安全性
[2] '''日本語文字の読みやすさ''':
[[日本語文字]]の読みやすさの計測基準を定めた [[JIS S 0032]]
という規格があります。この規格は [[CSS]]
の主要な[[応用]]である電子ディスプレイを適用範囲外としていますが、
それでも一応の参考とはなるでしょう。 (一般的に言って、
([[解像度]]等を考慮すると)
[[ディスプレイ]]に表示する[[文字]]の大きさは[[紙]]に[[印刷]]する[[文字]]よりも大きくするべきです。)
[3]
重要な文章の文字の大きさを通常の大きさと極度に変えるのは避けるべきです。
[[約款]]が細かい字で印刷されるのはよくあることですが(藁)、
当時者双方が平等な立場で契約するつもりがあるのなら、
読者の十分な理解を促すようなデザインを心がけるべきです。
また、読者は重要な注意書きが悪意のある著者によって小さな
(時には判読できないような) 文字で書かれていないか常に注意する必要があります。
[[利用者エージェント]]は安全のためにも最低の大きさを[[利用者]]が指定できる機能や、
[[対話的]]な[[利用者エージェント]]であれば[[利用者]]が指定した範囲を拡大したり、
[[文字列]]として複写・保存等をしたりできるようにするべきです。
[7]
[CITE@ja[第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro]] ([CODE[2007-02-14 18:59:17 +09:00]] 版) <http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/>
([[名無しさん]] [WEAK[2007-02-14 10:07:35 +00:00]])
[8]
[CITE@ja[第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro]] ([CODE[2007-02-14 19:05:40 +09:00]] 版) <http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/?ST=swd-design&P=2>
([[名無しさん]] [WEAK[2007-02-14 10:08:14 +00:00]])
[[#comment]]
** テスト
- [16] [CODE(CSS)@en[30[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [17] [CODE(CSS)@en[30.[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030.px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [18] [CODE(CSS)@en[30.0[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030.0px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [19] [CODE(CSS)@en[30.1[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030.1px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [20] [CODE(CSS)@en[.1[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%20.1px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [21] [CODE(CSS)@en[.0[[px]]]]
<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>
- [22]
[CODE(CSS)@en[0[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%200px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [23]
[CODE(CSS)@en[-10[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%20-10px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [24]
[CODE(CSS)@en[-0[[px]]]]
<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>
- [25]
[CODE(CSS)@en[-/**/0[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%20-%2F**%2F0px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [26]
[CODE(CSS)@en[30p\78]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030p%5C78%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [27] [CODE(CSS)@en[30\70x]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030%5C70x%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [28] [CODE(CSS)@en[3\30[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%203%5C30px%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
- [29] [CODE(CSS)@en[30/**/[[px]]]]
<http://suika.fam.cx/gate/2007/cssom/viewer?c=em%20%7B%0A%20%20font-size%3A%2030%2F**%2Fpx%3B%0A%7D;h=%3Cp%3E%3Cem%3ETEST%3C%2Fem%3E%20REF%3C%2Fp%3E%0A;p=n;x=style-element>
[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 は [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]]]]
<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 とも、
[CODE(DOMm)@en[[[getCurrentStyle]]]] の値は [CODE(CSS)@en[[[px]]]]
[[単位]]に換算されるようです。
[[Firefox]] では換算後の値も[[有効数字]]7桁目で[[四捨五入]]されているようです。
[[Opera]] は換算後の値を[[整数]]にしているようです ([[切り捨て]]か[[四捨五入]]かは未検証)。
([[名無しさん]])
[42]
>>40 の [CODE(DOMa)@en[[[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]] 共、元の [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]]]]
<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>
[CODE(DOMa)@en[[[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]] の [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]]]]
<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 [CODE(DOMa)@en[[[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]] も
[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]]]] を使っている?)。
;; 検証用 <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]] は [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]] 版) <http://d.hatena.ne.jp/aratako0/20070331/p1>
([[名無しさん]] [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]] 版) <http://q.hatena.ne.jp/1183455736>
([[名無しさん]])
[11]
[CITE[IEの「文字のサイズ」は通常どれに設定していますか ? (関連質問:http://q.hatena.ne.jp/1110376466) - 人力検索はてな]] ([CODE[2007-07-08 01:28:07 +09:00]] 版) <http://q.hatena.ne.jp/1183454336>
([[名無しさん]])
[12]
[CITE@ja[blog in a fog » フォントサイズ指定方法の検証]] ([[Yoji Sanada]] 著, [CODE[2007-07-13 22:25:22 +09:00]] 版) <http://blog.inafog.jp/archives/225>
([[名無しさん]])
[13]
[CITE@ja[CSS HappyLifeで述べられているfont-sizeプロパティの値は小さすぎる - 行動記録]] ([[IWAI, Masaharu]] 著, [CODE[2007-07-26 03:35:13 +09:00]] 版) <http://iwaim.beering.be/2007/03/body.html>
([[名無しさん]])
[14]
[CITE[Business Media 誠:「ブラウザの文字サイズ最大」が半数以上——家庭用PC]] ([CODE[2007-09-14 08:08:37 +09:00]] 版) <http://bizmakoto.jp/makoto/articles/0709/13/news036.html>
([[名無しさん]])
[15]
[CITE@ja[覚え書き@kazuhi.to: 文字サイズ変更ウィジェット]] ([CODE[2007-09-23 22:53:26 +09:00]] 版) <http://kidachi.kazuhi.to/blog/archives/002378.html>
([[名無しさん]])
[[#comment]]
* メモ
[57] [CITE[Bug 84469 – Consider dropping font size quirk]]
( ([TIME[2012-05-04 14:01:49 +09:00]] 版))
<https://bugs.webkit.org/show_bug.cgi?id=84469>
[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]] 版)
<http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a20_183fo_font-size>