95%的中国网站需要重写CSS
很长一段时间，我都使用12px作为网站的主要字体大小。10px太小，眼睛很容易疲劳，14px虽容易看清，却破坏页面的美感。唯独12px在审美和视力方面都恰到好处。
5 {7 [; k5 T/ D" w. ?& ]. E0 Y1 f( a3 u& ^2 v
谁对我的网站字体大小有意见？) j9 j* ?- Z" M9 W
, C o- V! |) g% q
我老爸，他是第一个向我反映看不清我的网站文字的人。这使我意识到12px，其实只是让我觉得很不错而已，而对于那些视力下降明显的中年以上的人来讲，几乎等于10px对于我的感觉。
5 |5 D9 [/ d, p7 L1 f j p3 @6 K8 F/ b! h; B8 `! @4 e
于是我告诉他，在“查看”里调整“文字大小”就可以了。但是却发现这是徒劳的。在Firefox能轻易调整的字体大小，怎么在IE就变得如此”坚不可调“？
: ^. @0 P1 _- v3 d! e! A. y* |5 ?, B& E' |/ r6 N
问题出在哪？
3 @: ^/ z* t9 T4 }) L9 k7 q
5 ?6 m/ S! t, z 我又试着打开中国的三大门户—新浪，网易，搜狐。它们的字体无一例外的在IE里失去可调性。看来这不是我网站独有的毛病。再看看MSN，Google，A list apart，华盛顿邮报，在IE里却是可调的。难道IE在字体调整上也搞歧视不成？
8 w. ?+ r- [# A( g6 L. y0 Z R$ n8 g( J
困扰我的问题直到看到这篇大作：How to size text using ems，才得到彻底的解决。
' O4 M! N4 S- G" e" j: j2 W0 ?, A C
关键点：
4 v. w4 d G$ A1 {' v3 a0 B4 J4 O/ s4 w" d$ W' o y# `2 t
1. IE无法调整那些使用px作为单位的字体大小；- g& N) u, [3 s" O( c9 l
) f% h L, { [' l% I; ?8 F 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；
/ r+ z: _6 {2 E+ \5 @: n, ?. K" x: Y0 t2 Y; y
3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。! n) A6 k7 A% S, s
( C( J. Q( `7 m1 L4 Y
95%的中国网站需要重写CSS) ^: Y4 o& e* }) ?- \6 [
: K# @- o+ f* A 在我所观察的中国网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。
: N+ H# P3 b. v+ u& x7 G! O0 }' k. Z
而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。! F- B" t" V, Q6 M/ U7 \
* D' J4 s1 |7 c' Z! F 没错，px比em更加容易使用，我也敢打赌大部分读者不知道em为何物或者它相当于多少px。
1 D" v- ~8 c# v8 u7 T9 G* [8 D
国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们—例如美国的Section 508，强制网站达到一定的易用性。所以没有哪个主流站点愿意被那些视力下降或是残缺的人告上法庭。
* M9 x; r7 h" g7 u, X
. |* g. X+ M) H 注: 在中国, 可能把微软告上法庭来的更简单点，为什么IE对于px那么死板。1 T# _* h5 M/ x8 u$ P) _: t, h6 ]' Q
+ a0 D e* `( E. s$ ?, Y9 ?
如何重写你的网站CSS
% A5 A6 u' t1 @! [6 @9 a( o( G( c+ q5 }& e4 t7 N
Jorux.com作为一个对视力下降人士负责任的站点，已经重写了CSS的Font-size部分。在这里，Jorux和各个有人文精神的网站主讨论如何用em重写Font-szie的问题。
9 V0 s0 }2 L+ V
! f3 T! C$ b% n( ]- p$ B em vs. px
v) G+ A5 R9 ?- [& U, M' H, l% n- B- ^6 b8 V. s# c! {4 e
em是何物？' h# k( k* K1 L5 c# T7 u& u8 D
. g. e; P; i- M3 l& Y em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font- size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
" @ Y t$ h# E+ a
, b1 E. ]/ @" k2 b. C( F 1. em的值并不是固定的；
# Y, B$ x6 ~, z9 ]4 }% l
! Z2 F& K. r! a/ R! _ 2. em会继承父级元素的字体大小。
* [' r) @1 a# m
8 ^" B( v4 M0 t/ j. W/ Y9 G 重写步骤：6 p3 t# s( @. @' a
+ ~, n% r! R5 T" l \& j
1. body选择器中声明Font-size=62.5%；
; V+ t) _, A. p7 x. ^9 Q4 U% J: W/ Z
2. 将你的原来的px数值除以10，然后换上em作为单位；5 P2 J2 o {% I0 z( U7 b: r
+ j: Y) K2 y3 e3 q1 w6 e; A, u 简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是 1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。% U6 {$ f0 [" u/ Q
0 ^: h$ T; H/ |3 ?; l 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。" {& Z8 A$ {+ t6 t/ R
* a) b" a& n' L! _# p4 m4 e- _; I - @7 f$ w- }/ t5 w- I& Y3 e8 H# F
* _+ q8 E0 q1 d/ X7 Q 诡异的12px汉字(原因待查)
6 w @; I. p5 O2 c
% I8 b8 f& _: w7 x 本人在完成em转换时还发现了一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题我已经解决，你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗？
5 E6 D7 X" D+ B' R% d% y% o' j) F5 i6 e9 _$ w$ t
本现象只发生在12px的汉字，英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm， 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css，看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接
4 f# F7 q4 M; o, f- m
; E% R" Z1 A/ m% I% z: M 还可以做哪些改进
3 u0 F8 I- U* }4 Q% X3 q
+ o( }( M+ i2 J1 r/ A 为什么还需改进：
! R6 T f4 S6 C) b
: h6 \ Q! L: P% K 1. 你的网站css过于复杂，以至于不知道元素的从属关系，很难重写css；
. _) N. t) ^" ?6 C; d+ s$ {2 V2 j* b/ U* ~
2. 绝大部分人看了本文之后仍然不会重写css；" f+ c: [9 M& m) K7 O2 ^
* Y. }! t. ^ r. J6 F0 Y: m) F 3. 很大部分人不知道浏览器可以调整页面的字体大小。( M% _1 d4 m) \. H
; @ I. H I- V3 q9 B0 {, O 所以你需要一个诸如本站信息框中的字体大小调整控件。, b5 D% S! r* [( [2 z, D) v
7 V4 `& ^3 K& P1 B
相信本站读者的英语能力，这里就不再罗嗦了，请参看：The Text Changer, G7 T; J! b. K
3 R& A9 |! d! U$ a Important reference:3 g9 ~1 T8 D( p# b; U& ^, c9 A! C
) _0 K+ f; c( ]. ` 1. How to size text using ems, A9 }2 S5 N( T/ C+ Z) V3 P9 x i
% s8 i' o }, ~8 b- @8 X. m2 e! n 2. The Text Changer
+ T6 q. U6 O. e. i9 G8 Z' w1 T0 ~3 I! Y, p
备注:
0 A: w) f) j" b _# f7 }5 u5 D. h6 T1 N
1. 自网站Reboot以来，老爸又反映我整天在”属性一”"属性二”的，看不大明白，已经拒绝访问Jorux.com了;0 O W! m+ b6 L7 _
- I/ ^' @% j. B& X+ u* ~! @
2. 读者对如何用em重写css，或是对字体大小调整控件有任何疑问，请留言;
0 u5 Q |7 s: {7 j/ X& ]3 F" @3 I1 I4 [8 x
3. 本站在加强易用性上做了如下改进:a. 用em重写了css; b. 去除了51.la和文本广告代码，提高了网页加载速度; c. 增加了字体大小调整控件;
$ W" i) O F. J, I( A3 U) @7 b, q
$ ] _% M [; @3 I" \ 4. 重新整理”Other Blogger”链接，请发现被摘掉链接的网站自行摘除链向本站的链接，本站停止交换友情链接。尚保留的网站有如下特点:a. 非日记式博客；b. 内容优秀；c. 原创为主；+ @5 X0 {8 V! K/ ]$ q
% M6 l/ w- x( c/ ^: _. N 5. 本站常规在周一发表post,间隔为一到两周,感谢读者对本站的关注, 以后除星期一以外,您都不需更新本站Feed了。
