CSS中的文字大小(px,em,pt)

     2010     2月-28,14    

font-size的那些事-01

W3C规定的文字单位是em,通常我们在设计制作网页时,习惯用px。也许有以下情况,参与团队项目时,要修改已经成型的项目,然而项目中关于文字尺寸大小的定义采用的是px,这个时候,我们该怎么下手?当然了,产生这种情况的关键在于我们对于em很陌生,搞不清楚px与em之间的关系和特点。

 

px:

px是pixel缩写,是一个虚拟长度单位,是计算机系统的数字化图像长度单位。在浏览网页过程中,屏幕上的文字、图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在 800×600分辨率下,要占屏幕宽度的1/8,但在1366×768下,则只占约1/13。所以如果在定义字体大小时,使用px作为单位,那一旦用户改 变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位。

em:

em:即%,是相对单位,是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。,一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元 素的字体大小。

pt:

是一个物理长度单位,指的是72分之一英寸。如果在web上使用pt做单位的文字,字体的大小在不同屏幕(同样分辨率)下一样,这样可能会对排版有影响,但在Word中使用pt相当方便。

他们之间的关系:1em = 12pt = 16px = 100%

px和em的关系和使用:

以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持,在这里也推荐使用PX作为单位;任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

body{font-size:62.5%;}

font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px
以此类推。

em的特点:

1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
我们在写CSS的时候如果要用em为单位,需要注意两点:

  •  body选择器中声明Font-size=62.5%;
  • 将你的原来的px数值除以10,然后换上em作为单位;
  • 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
    也就是避免1.2 * 1.2= 1.44的现象。比如说你在.main中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承.main的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。 这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

  • 崔先生 发表于: 2014/03/25 19:56

    很漂亮的主题,你自己设计的吗?
  • 你需要先 登录 才能发表评论.