CSS网页设计字体大小(em)探讨

【 tulaoshi.com - Web开发 】

相关文章：CSS教程：简单理解em

秦歌(YanKaven)的站点：http://dancewithnet.com/

今天是 Firefox3的2008下载日 ，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是 全页面缩放（Full page zoom） 。这就意味着Firefox3和Opera以及IE7+都可以让用户完全控制显示内容的大小同时自动调整页面布局和结构，说白了就是可以让整个页面直接放大或缩小却不会乱掉。这就意味着我们不用再考虑为了可访问性而整个页面是基于字体大小（em）的布局了。

在CSS中，有两种单位。一种是绝对长度单位，包括英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是相对长度单位，包括em、ex和像素(px)。ex由于在实际应用中需要获取x大小，因浏览器对此处理方式非常粗糙而被抛弃(更多内容可以参考Eric A. Meyer的《CSS权威指南》)，所以现在的网页设计中对大小距离的控制使用的单位是em和px（当然还有百分数值，但它必须是相对于另外一个值的）。

在css中，1个em定义为一种给定字体的font-size值。所以1em可能随元素的不同而不同，它会相对于父元素字体大小而改变。在常见浏览器下，默认字体的大小为16px。常见有两种方法来进行网页设计：

这样虽然省去了设置默认字体的大小，但是偶尔却为严格尺寸设计带来麻烦，比如你要设置那个宽为974px的容器#wrapper就会遇到此类麻烦。其实第一种方法也会遇到类似麻烦，只不过比第二种少些。

基于字体大小的设计好处很明显，当用户调整浏览器默认字体的大小时，字体和页面会随之缩放，能够满足挺这种方法的人常说的一个优点就是弱视的人可以通过放大字体来看清楚页面内容，增强了页面的可访问性。

每个屏幕都有分辨率，比如1280×1024分辨率时屏幕就有1280×1024个点，这每个点就是一个像素(px)。所以利用px来设计网页，不存在em那种相对于父元素字体大小变化而变化的问题。而实际上绝大部分的站点设计都是基于px设计的。在Windows平台下IE7之前都无法通过调整浏览器中的字体大小来调整文本大小，非IE浏览器可以，但实际上是一般基于px的页面，一旦仅仅调整了文本大小页面就会乱掉（在Firefox 2下观看除中国雅虎外的门户网站，调整一下字体大小就了解了）。

为了IE下不能调整以px为单位的字体大小，而非IE下可以的问题，YUI CSS Tools采用了如下代码来设置默认1em的大小，支持用户的字体大小调整：

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

为此IE默认情况下，1em的大小是13.3333px，所以你会看到YUI CSS Grids里面那些诸如width:73.076em;这样的值。

所以，基于字体大小（em）的设计和基于px的设计相比而言：

现在主流浏览器都支持了全网页缩放功能，Safari尚未支持这个功能，而是像Firefox2一样支持文本缩放，但是具有讽刺意味的是Apple页面基本上都是基于px的，所以一缩放就乱掉，我深信Safari支持这个功能仅仅是时间问题。两年前有篇《95%的中国网站需要重写CSS》很流行，虽然保证用户的可访问性是应该的，但是应该找到其最佳实现的方法，毫无疑问浏览器的全页面缩放功能是最佳选择。从现在开始，基于px的设计不用再过于背负违背可用性的恶名了，基于em（文字大小）的设计不能给我们带来太多的好处，反而有可能耗费太多的精力挣扎于如何精确保护视觉设计上，设计师的精力应该更多的放在内容的理解、快速呈现、语义化、对屏幕阅读器的支持等等方面上。

全球范围内IE6已经不到40% 了，中国用户比率应该高些，但趋势是一样的，毕竟IE8都出Beta了，IE6会很快成为历史的。如果你是偏执狂，需要考虑Firefox2和Safari的话，或许设置body{font-size:10px;}是一个不错的办法，中国雅虎的首页就是利用类似原理。总之，是时候不用考虑基于字体大小（em）的设计了，特别是针对IE6的解决方案。

原文：http://dancewithnet.com/2008/06/17/