Google

做标准的网页设置字体大小

Written on:二月 22, 2011
Comments
Add One

一般来说,我们在对一个网页进行设置的时候,通常对宽度和高度都喜欢使用像素PX来进行定义,但是这样往往为我们带来了很多的不方便,因为我们的浏 览器默认的是用字高em来作为字体的单位,而我们普遍的却是像素px。这样造成了很多不方便的地方,一个网页当中有很多字体的样式,字的大小的植都不同, 当我们写东西需要在每一段前空两格,那么我们用PX来定义的话就十分的麻烦,我记得在刚学网页制作的时候,老师曾经告诉我必须用CSS强制定义字体大小 ,否则保证每个人都看到一致的效果。这一点在现在的中国站点尤为明显。包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。但 是,如果从网站易用性方面考虑,字体的大小应该是可变的,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场的IE无法 调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位。

1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此,12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式:

html { font-size: 62.5%; }

这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即:

html { font-size: 63%; }

在中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算 非常不通用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了:

p { text-indent: 2em; }

Leave a Comment

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

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>