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

2024-07-11 08:24:59

字体：大中小

来源：转载

供稿：网友

相关文章：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下观看除中国雅虎外的门户网站，调整一下字体大小就了解了）。

上一篇：如何实现FireFox文本自动换行

下一篇：CSS教程：行高line-height属性(2)