当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 字体单位em简介

CSS样式表
CSS Expression 优化
CSS 网页布局时常犯的10个小错误整理
CSS代码 解决网页挂马问题
CSS去除表格的默认间距并且制作1px的细线表
CSS的私有属性小结(针对FireFox浏览器)
CSS网页设计中的解决方案
Firefox和IE通用的三则网站重构实用技巧
CSS解决文字环绕图片问题
CSS教程:可扩展圆角标签的实现方法
CSS教程:水平对齐(text-align)
写给刚刚接触web标准的新人们
CSS教程:盒模型(BOX Model)
CSS教程:CSS中的定位(position)
Web标准真的是标准吗?
从四个方面谈谈Web标准的价值所在
CSS教程:网页表单设计技巧
CSS Hack整理
CSS教程:网页文本渐变
CSS教程:用dl dt dd来制作列表
CSS入门教程:计算CSS盒模型宽和高

CSS样式表 中的 CSS 字体单位em简介


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 112 ::
收藏到网摘: n/a

刚学网页制作的时候,老师曾经告诉我必须用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; }