CSS字体大小之em,px,百分比
首先要记住网页中常规字体的大小为16px。
px是用来设置字体的绝对大小。通常为用于物理值的设置。我们在互联网上看到的常规字体大小为16px。而em是指相对于父元素的大小。1em是父元素的1倍,2em就是大小为父元素的2倍。当前,一般情况下,父元素的默认字体为16px。所以通常会认为1em = 16px。
绝大多数浏览器都支持更改网页的字体大小,例如chrome浏览器就是CTRL和'+'同时按下,放大字体。同理CTRL+‘-’就是缩小字体。或者CTRL+滚轮。但是IE无法调整那些使用px作为单位的字体大小。而国外的大部分网站都采用em作为字体大小。
px | em |
---|---|
px像素(Pixel)是绝对长度单位,像素px是相对于显示器屏幕分辨率而言的。 | em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。 |
px是绝对单位,不支持IE8以下的缩放。但是FireFox,Chrome和IE8以上都支持。 | em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。 |
px 宽度常用在图片宽度的定义等绝对定义的场合,使用 px 设计的网页不会因为父元素的大小而改变,这样可以保证设计的精确度。 | 中文文章的段落首行缩进两个字符直接使用 p {text-indent: 2em} 就行。在其他需要依字体大小来设置宽高度,大小的使用 em 也是比较方便的。 |