上一节开头曾提到国内网页设计普遍存在的一个缺陷,即把12px作为网页默认字体大小来设置。px像素作为单位虽然比较精确,但它也限制了CSS设计网页的灵活性,使网页可性变得更加呆板。
前96%以上的国内网民使用IE浏览器(或内核)。意味着中国大部分网站的字体大小是可以在IE浏览器上进进行调整的,而国外所有的主流网站都使用em作为字体单位,是可以调整瞧的。虽然px比em更加容易使用,但它会使网页失去灵活性。
任意浏览器的默认字体度都是16px。所以未经调整的浏览器都符合lem=16px。经过换算:5px=O.937em, 14px=O875em, 13px=O.812em, 12px=O.75em, llpx=O.687em, lOpx=O.625em。
为了简化字体大小的换算,我们可以采用这这种方法:先在CSS代码中的body选择符中声明font-size=62.5%,这就em值变为16px*62.5%=lOpx,这样12px=l.2em,lOpx=lem,也就是说只需要将原来的px数值除以10,然后换上em作为单位就行了。
提倡使用帥作为字体大小单位具有如下优势:医用灭菌袋 灭菌袋封口机 硅橡胶印模材 齿科针
em的值并不是固定的,具有可调性,这更适合CSS网页设计所提倡的可读性原则。em会继承父级元素的字体大小这样在body元素中定义页面的字体大小之后,其他元素的字体都会跟随body元素的字体素的字体大小变化而变化,页面控制就显得很轻松。对于这样的浏览器,浏览者通过调整浏览器默认字体大小也能够实现页面字体的大小调节。因为页面所有字体大所有字体大小都是参照浏览器默认大小来确定的。
因为em的值不固定,又会继承父级元素的大小,所以设计师应谨慎使用多层嵌套定义em值或分比值,否则容易出现设计师自己都搞不清内部元素的字体大小到底是多少的情况。例如,在一包含块中把字体大小设为1.2era,也就是12px(参照上面的简化处理技巧),然后嵌套一个子元素,定义字体大小为1.2em,而在子元素中再嵌套一个p元素,并设置它的正文字体为0.8em,标题字体大小为1.2em,如此等等,那么段落正文和标题的字体大小到底是多少呢?
设计师需要停下来慢慢计算,这时段落正文字体大小就不是8px,而是.2,0.8,12px~ll.52px~而标题就是1.2木1.2嗥12px=17.28px。真是不是很麻烦,想一想如果你使用的嵌套单位超过3层,这种算是不是非常繁琐。所以,网页设计师应避免字体大小的重复声明,也就是避免以上提到的嵌套定义em字体的现象。另外,读者要注意一个兼容问题:就是在用上述方法得到的12px (1.2era)大小的字体在IE中并不等于直接用12px定义的字体大小,而是稍大一点。解决的方法是在body选择符62.5~/099l成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。