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

为了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的设计相比而言：

1. 基于字体大小(em)的设计页面带来的缩放效果有限，最早基于字体大小设计的门户网站应该就是Yahoo和MSN了，而实际上它们也仅仅是保证了上下缩放三级而已，再多就乱掉了。
2. 现在的站点越来越多的图文混排，图像的高度和宽度本身就是像素数。除非你通过CSS来把图片的大小设置为相应的em值，就像本站的Logo这样，否则图片是不会随着文字变化而变化的。但是如果采用的是背景图片，那就基本上无计可施了。所以实际上基于字体大小来做图文混排设计的网页需要对图像的设计是有相当严格的要求的，即使如此仍无法完美解决，但复杂度却上升不少。
3. 基于字体大小的网页设计，将使长度变得的非常的不直观，导致设置一个宽度变得非常麻烦，YUI CSS Grids中说明了这点。并且由于em会相对于父元素字体大小变化而变化的问题，导致图文混排的复杂设计时非常麻烦。特别是在盛行过度设计和精确到像素的这个浮躁时代。其实连Google和百度这种非常简单的首页都或多或少的利用px来布局。

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

全球

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!