网页字体单位,慎用em

关于em这个字体单位,我一直都觉得非常纠结,因为它的定义十分模糊,学习CSS至今我都没弄懂。只知道它是一种相对长度单位,默认1em=16px(即浏览器默认字体大小)。

但em使用时并不是简单的1em=16px这么算,以下为引用内容:

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 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作为单位就行了。

看了这个我非常纳闷,默认1em=16px,但这却不合设计者的要求,又手动调整为1em=10px,这样12px=1.2em。。。这样绕来绕去的,不如直接设置为12px得了。使用em据说是它可以自动调整,对用户体验好,但我觉得,与其让它自动调整,不如就把字体设置大点。

看到有些文章推荐网页使用em作为字体单位,并列举了这样做的几点好处,其中有一条是“国外的大部分网站能够调整的原因在于其使用了em作为字体单位”,但网页设计者们不要忘了,国外都是英文网站。。。英文默认10px就可以阅读,而汉字则要12px以上才能看清楚,所以国外的定义拿到国内的不一定适用。

我们按照上文引用中的用法,来做个测试:

body{font-size:62.5%;}
p{font-size:1.2em;text-indent:2.4em;width:400px;}

firefox截图如下:

http://ywfvva.bay.livefilestore.com/y1pb1l6is7wlyTZtS4CV_i7DmR4wKYCL73a9qLy0M2MZ75GhQU9XtrVeSrsRHeikqZuXufLMoJ9wXIPjBrxJJmFp3CBbB5nx0cU/em.jpg?psid=1

可以很明显地看到字体由于小于12px而模糊不清。如果你网页上大段大段的文字都是这个样子,读者不骂娘才怪。

注:IE及chrome正常,都为12px左右,其中chrome有一个bug:不能显示12px以下大小的字体,所以到底兼容性如何还是未知数。

看到这里建议有网站的同学用firefox查看一下自己的网站,特别是使用国外主题的wordpress用户——之所以写这篇文章就是因为我看到好多使用外国主题的wper们都出现了图中的情况,都看不下去了!

鉴于em使用的麻烦度与不兼容性,我觉得网页字体还是不要用em的好,要用就把它相对设大点,以免出现上图的情况。另外,如果觉得小字体对用户不好的话,就设置font-size:14px吧,这样在什么分辨率下都足以看清了。

2 评论

发表评论

电子邮件地址不会被公开。