草根站长论坛 » 草根网站建设运营 » 95%的中国网站需要重写CSS

随性Ⅻ 发表于 2008-5-11 11:15

95%的中国网站需要重写CSS

　很长一段时间，我都使用12px作为网站的主要字体大小。10px太小，[b]眼睛[/b]很容易疲劳，14px虽容易看清，却破坏页面的美感。唯独12px在审美和视力方面都恰到好处。h6H d-L)Ww0{;S
,d2u&DU1jE
　　[b]谁对我的网站字体大小有意见？[/b]XJ{%Wja)k_8J7E;K
1Srkb g|4Q7i
　　我老爸，他是第一个向我反映看不清我的网站文字的人。这使我意识到12px，其实只是让我觉得很不错而已，而对于那些视力下降明显的中年以上的人来讲，几乎等于10px对于我的感觉。
c*U5VK+W8l.p-~S
)Ye^HD!_0Y
P 　　于是我告诉他，在“查看”里调整“文字大小”就可以了。但是却发现这是徒劳的。在Firefox能轻易调整的字体大小，怎么在IE就变得如此”坚不可调“？)p0Q?"YqG/h(j)z

'il
NNl9if 　　[b]问题出在哪[/b]？no'g8g0u5`{4``
Q }DqE
　　我又试着打开中国的三大门户—[color=#0000ff]新浪[/color]，[color=#0000ff]网易[/color]，[color=#0000ff]搜狐[/color]。它们的字体无一例外的在IE里失去可调性。看来这不是我网站独有的毛病。再看看[color=#0000ff]MSN[/color]，[color=#0000ff]Google[/color]，[color=#0000ff]A list apart[/color]，[color=#0000ff]华盛顿邮报[/color]，在IE里却是可调的。难道IE在字体调整上也搞歧视不成？ GT5[6c0q6Zx#VLs

ad["JZy7[Tzx-[.N 　　困扰我的问题直到看到这篇大作：[color=#0000ff]How to size text using ems[/color]，才得到彻底的解决。^3QS8o6?m

2H)k3oi.]#g!`W,[ 　　[b]关键点[/b]：%d FH^+}nHd

o%ZG1t*~Q3[H 　　1. IE无法调整那些使用px作为单位的字体大小；
S]hNq :@-a#S3vOZM*~
　　2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；
$AztL[K%T ~,Y4b4KO+K%o Ux
　　3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。[7A+n s,v#U-_/D%P#F
+q@;{8J c8h^%eS
　　[b]95%的中国网站需要重写CSS[/b]o%`ICK'rpm:K5l

}1sHrP8AhW 　　在我所观察的中国网站中，包括三大门户，以及“引领”中国网站设计潮流的[color=#800080]蓝色理想[/color]，[color=#0000ff]ChinaUI[/color]等都是使用了px作为字体单位。只有[color=#0000ff]百度[/color]好歹做了个可调的表率。
`/qhR$J1w:t"V F _+?:d4d1Q
　　而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。i jlym#b1R ~[E U
-a_$]xyLK Jq%G
　　没错，px比em更加容易使用，我也敢打赌大部分读者不知道em为何物或者它相当于多少px。
tU0`g
xUs

b
A&J(VNt4C} 　　国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的[b]人文精神[/b]，直接原因可能是因为有一部法律来约束他们—例如美国的[b]Section 508[/b]，强制网站达到一定的易用性。所以没有哪个主流站点愿意被那些视力下降或是残缺的人告上法庭。fk_-y@%C+S
(imh*_S#nz H h
　　[color=#ff0000]注[/color]: 在中国, 可能把微软告上法庭来的更简单点，为什么IE对于px那么死板。
#DP `3e.oNDe
,S O;e)g]e:e%t!`z#E 　　[b]如何重写你的网站CSSQ!H"G#n lr ^+_&EE
'xva:Eq%R.Wc9u
　　[/b][color=#0000ff]Jorux.com[/color]作为一个对视力下降人士负责任的站点，已经重写了CSS的Font-size部分。在这里，Jorux和各个有人文精神的网站主讨论如何用em重写Font-szie的问题。$nx%K
X;[_

E;e[ m#e_ 　　em vs. px
.? jb3k8DU1}%?
)e~b#Z4M[(y$r 　　[b]em是何物？[/b]
%O u^#R7G!] Y }&CXk N1\iGg
　　em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了[b]简化[/b]font- size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
#b fc2uTT$M xmK;?-eX8W'xj"\
　　1. em的值并不是固定的；
;^1p,CN,?9z^~| |,Ds%C1GxZ%mD&K
　　2. em会继承父级元素的字体大小。
({ Pbp H7P(mp nz%KM p#^.p2s%W1{z:X
　　[b]重写步骤：s'@ A{J"KJ)F
(_ JC.Q"NZ
　　[/b]1. body选择器中声明Font-size=62.5%；/F7a)y(?}`
1B e7Z9C,Mpu
　　2. 将你的原来的px数值除以10，然后换上em作为单位；

z8ox"Vrl s1Ma +z7Gi!l$S
　　简单吧，如果只需要以上两步就能解决问题的话，可能就没人用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。p)D7k?Hd8T-z

Z&J x!N2S-B 　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
j3if ~*z_
\r.B/V E.C2q 　　[b]
1pr:Vv/l4i
jU
|6q%Q7m?Tk[*m.W|%\ 　　[/b][b]诡异的12px汉字(原因待查)[/b]
/o T-Qy2s"K h}dsp4n?7nZY
　　本人在完成em转换时还发现了一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题我已经解决，你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗？L4FJS8v8syL"m [
;W2s^(R*{)VJ$E
　　本现象只发生在12px的汉字，英文不存在此现象。你可以在这里下载到此表现此现象的[color=#0000ff]文件[/color]。下载后请读者用IE打开sample.htm， 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css，看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。[color=#0000ff]演示链接[/color]IZ8v]
KY
`,vt:J_lA
　　[b]还可以做哪些改进[/b]O%akK^.c j
4AY"^/Q|-_
　　为什么还需改进：&T7F'Eo/xH kP

s4Us9zn 　　1. 你的网站css过于复杂，以至于不知道元素的从属关系，很难重写css；hxt4b#k&q

Ft6t!OS` 　　2. 绝大部分人看了本文之后仍然不会重写css；S|L3Y~vt4P&|cp
5s qd_ l
　　3. 很大部分人不知道浏览器可以调整页面的字体大小。
DLE#eL1q D&Ja N
O8k \An
v(S 　　所以你需要一个诸如本站信息框中的字体大小调整控件。)e{9H:I,v
zA
,L3C/O'P M%p
　　相信本站读者的英语能力，这里就不再罗嗦了，请参看：[color=#0000ff]The Text Changer[/color]6k(g,g BwD.@2E'm
:lSSFxC@,O(D
　　[b]Important reference[/b]:
%h-DK.s!`A)]S"x
"zqd5Ss&} 　　1. [color=#0000ff]How to size text using ems[/color]
'Yn4kI j 'nC*Pn1[Q @*np
　　2. [color=#0000ff]The Text Changer[/color]
U+N:DB9R*S
u'K|R$i'|k*~ b%y 　　[b]备注[/b]:
#{P3n2BH
Q o9J*O;Jx_ 　　1. 自网站Reboot以来，老爸又反映我整天在”属性一”"属性二”的，看不大明白，已经拒绝访问[color=#0000ff]Jorux.com[/color]了;
ei],M L!L&B4O;]'t
#_SJ/^.^7ng 　　2. 读者对如何用em重写css，或是对字体大小调整控件有任何疑问，请留言;a{ J~%_-i6P"fwN
_7lI-f CPpQ{
　　3. 本站在加强易用性上做了如下改进:a. 用em重写了css; b. 去除了51.la和文本广告代码，提高了网页加载速度; c. 增加了字体大小调整控件;
N-T|0]#RO2X+zW
w_2N`Fhy:C_4@ 　　4. 重新整理”Other Blogger”链接，请发现被摘掉链接的网站自行摘除链向本站的链接，本站停止交换友情链接。尚保留的网站有如下特点:a. 非日记式博客；b. 内容优秀；c. 原创为主；(_u!qIX#J
s3cAh,f
　　5. 本站常规在周一发表post,间隔为一到两周,感谢读者对本站的关注, 以后除星期一以外,您都不需更新本站Feed了。

查看完整版本: 95%的中国网站需要重写CSS