雕刻时光

使用em和关键字设定页面文字大小

关于页面文字的大小控制,即font-size属性,常见的方法是使用像素单位px进行控制,例如font-size:12px。但这样的置后,对于主流的IE用户就不能任意改变字体大小了。这里说的改变字体大小不是指 “ctrl +/-“或者”ctrl  滚轮”来控制页面的大小,而是在IE下的“页面-文字大小”中的“最大(G)-较大(L)-中(M)-较小(S)-小(A)”五个层次来控制文字的大小。

其实CSS中字体大小的设置还有几种方法:使用em(相对于父元素的字体大小,是个相对单位);使用“关键字”和百分比。本文是看到万戈童鞋那篇《css中font中px与em的区别》后突发感想整理的,你可以去万戈那围观生动活泼版的。

 

1.使用em

先介绍下em:em是一个可变的长度单位,1个em的长度就是一个字型的长度。在6针字型中,em就是6个点的长度,12针字型中,em就是12个点的长度,以此类推。因此,在任何尺寸下em都是等比例的。这点是px做不到的。如果当前字体大小的默认设置(大多数浏览器)是16px,那么1em就是16px;如果默认设置是11px,那么1em就是11px。使用em后,调整文字大小,会按比例调整。

你可以将<body>中的基准字体大小设置为62.5%,这时字体大小就是默认16px下的10px了,方便计算哦。例如:

body{font-size:62.5%;}   /*设置基准*/

h1{font-size:2em;}   /*20px*/

h2{font-size:1.8em;}   /*18px*/

p{font-size:1.2em;}   /*12px*/

#sidebar{font-size:1em;}   /*10px*/

2.使用关键字和百分比

css中表示字体“绝对大小”的关键字共有七个:xx-small/x-small/small/mediam/large/x-large/xx-large,两个相邻关键字之间的比例是1.5.由于平台或者浏览器不同,使用关键字控制字体大小可能会有细微的差别。例如:

body{font-size:small;}   /*设置基准-这时字体大小和12px差不多*/

h1{font-size:150%;}  

h2{font-size:130%;}  

p{font-size:100%;}  

#sidebar{font-size:85%;}  

和em一样,关键字是建立在用户默认字体的基础上,而比em方便的是,关键字值不会低于适当分辨率的最低值。如果用户的默认值是10px,那么x-small将是9px,xx-small也将是9px。

当然,如果你要准确控制文字大小,px还是最可靠的单位,避免了脑袋发热的计算错误和套嵌百分比值带来的风险。其实使用字体大小切换的方法也是一个不错的选择(万戈童鞋都给咱准备好了)。至于使用哪种方式还是却绝于个人喜好吧。

参考资料:《无懈可击的WEB设计(第二版)》,《网站重构-应用WEB标准进行设计(第二版)》,《CSS禅意花园》。

22 thoughts on “使用em和关键字设定页面文字大小”

    1. @韩国 个人觉着都差不多吧。。只要注意百分比套嵌的问题就好了哦。。

  1. em这个标签我当初在书上看过,但是忘记了。。。当初三分钟热度买了书。。现在在抽屉里。。。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注