关于页面文字的大小控制,即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禅意花园》。
我直接用DIV,好像有问题,在IE下会出现个框架。
对font-size解释的比我细致啊,呵呵
呵呵 不会弄啊
@immama 呵呵、、这个不用折腾哦。。
我来学习下了啊 赞助广告给你攒钱了啊 呵呵
哪一个好处多一些呢?
@韩国 个人觉着都差不多吧。。只要注意百分比套嵌的问题就好了哦。。
em这个标签真是没有整理过。。。用的也不是很多
@WordPress啦 嗯啊。。px基本就能满足需求咯。。
em这个标签我当初在书上看过,但是忘记了。。。当初三分钟热度买了书。。现在在抽屉里。。。
@shinwea 几乎所有的书上都有介绍的哦。。。
对代码一窍不通啊
@小宇博客 我也不怎么懂哦。。慢慢来。。
哥们.多久没更新了..//
@伦达国贸城 就一天没更新哦……o(︶︿︶)o 唉
@第六空间
嗯?不是DIV布局,CSS控制样式么?
@万戈
就是简单介绍一下而已。。还是万戈给力啊。。图文并茂的。。哈哈、
总结得不错,是这么个意思
呵呵、、3q
你是山东的吗
@dudo 是山东的哦。。你也是么?
@Feeng
不是CSS控制啊。再过三个月换模板