您的位置: 首页 > 技术文档 > 网页制作 > 关于基于字体大小(em)的设计
innerHTML 的一些问题 回到列表 HTML5 第二份草案发布
 关于基于字体大小(em)的设计

作者:秦歌 时间: 2008-06-17 文档类型:原创 来自:蓝色理想

秦歌(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之前都无法通过调整浏览器中的“字体大小”来调整文本大小,非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的设计相比而言:

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

本文链接:http://www.blueidea.com/tech/web/2008/5886.asp 

出处:蓝色理想
责任编辑:bluehearts

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
Firefox中复制/粘贴进阶技巧
成为一个顶级设计师的第一准则
Opera不比Firefox差
我到底该选择哪种字体格式?
打造你自己的字体 Ⅲ
作者文章 更多作者文章
Javascript的匿名函数
Firefox2中输入框丢失光标bug
Javascript风格要素 Ⅱ
Firefox 2和3在windows下的共存
Javascript风格要素 Ⅰ
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2