快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04

相关文章: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。常见有两种方法来进行网页设计:

  1. 设置默认字体大小为10px:
    body{font-size:62.5%;}
    #wrapper{width:97.4em;}

    这便于依次计算出其他元素的长宽值,比如某个容器#wrapper的宽度是974px,CSS中定义为97.4em。本站随网之舞就是依据这种方式来实现的。
  2. 设计默认字体大小为网页中最常用字体的大小,比如最常用字体的大小是12px:
    body{font-size:75%;}
    #wrapper{width:81.1667em;}

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

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

每个屏幕都有分辨率,比如1280×1024分辨率时屏幕就有1280×1024个点,这每个点就是一个像素(px)。所以利用px来设计网页,不存在em那种相对于父元素字体大小变化而变化的问题。而实际上绝大部分的站点设计都是基于px设计的。在Windows平台下IE7之前都无法通过调整浏览器中的“字体大

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号