首页 考试吧论坛 Exam8视线 考试商城 网络课程 模拟考试 考友录 实用文档 求职招聘 论文下载
2011中考 | 2011高考 | 2012考研 | 考研培训 | 在职研 | 自学考试 | 成人高考 | 法律硕士 | MBA考试
MPA考试 | 中科院
四六级 | 职称英语 | 商务英语 | 公共英语 | 托福 | 雅思 | 专四专八 | 口译笔译 | 博思 | GRE GMAT
新概念英语 | 成人英语三级 | 申硕英语 | 攻硕英语 | 职称日语 | 日语学习 | 法语 | 德语 | 韩语
计算机等级考试 | 软件水平考试 | 职称计算机 | 微软认证 | 思科认证 | Oracle认证 | Linux认证
华为认证 | Java认证
公务员 | 报关员 | 银行从业资格 | 证券从业资格 | 期货从业资格 | 司法考试 | 法律顾问 | 导游资格
报检员 | 教师资格 | 社会工作者 | 外销员 | 国际商务师 | 跟单员 | 单证员 | 物流师 | 价格鉴证师
人力资源 | 管理咨询师考试 | 秘书资格 | 心理咨询师考试 | 出版专业资格 | 广告师职业水平
驾驶员 | 网络编辑
卫生资格 | 执业医师 | 执业药师 | 执业护士
会计从业资格考试会计证) | 经济师 | 会计职称 | 注册会计师 | 审计师 | 注册税务师
注册资产评估师 | 高级会计师 | ACCA | 统计师 | 精算师 | 理财规划师 | 国际内审师
一级建造师 | 二级建造师 | 造价工程师 | 造价员 | 咨询工程师 | 监理工程师 | 安全工程师
质量工程师 | 物业管理师 | 招标师 | 结构工程师 | 建筑师 | 房地产估价师 | 土地估价师 | 岩土师
设备监理师 | 房地产经纪人 | 投资项目管理师 | 土地登记代理人 | 环境影响评价师 | 环保工程师
城市规划师 | 公路监理师 | 公路造价师 | 安全评价师 | 电气工程师 | 注册测绘师 | 注册计量师
缤纷校园 | 实用文档 | 英语学习 | 作文大全 | 求职招聘 | 论文下载 | 访谈 | 游戏
您现在的位置: 考试吧(Exam8.com) > 软件水平考试 > 复习资料 > 网页制作 > 正文

关于基于字体大小(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。常见有两种方法来进行网页设计

  设置默认字体大小为10px:

  body{font-size:62.5%;}

  #wrapper{width:97.4em;}

  这便于依次计算出其他元素的长宽值,比如某个容器#wrapper的宽度是974px,CSS中定义为97.4em。本站随网之舞就是依据这种方式来实现的。

  设计默认字体大小为网页中最常用字体的大小,比如最常用字体的大小是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的设计相比而言

  基于字体大小(em)的设计页面带来的缩放效果有限,最早基于字体大小设计的门户网站应该就是Yahoo和MSN了,而实际上它们也仅仅是保证了上下缩放三级而已,再多就乱掉了。

  现在的站点越来越多的图文混排,图像的高度和宽度本身就是像素数。除非你通过CSS来把图片的大小设置为相应的em值,就像本站的Logo这样,否则图片是不会随着文字变化而变化的。但是如果采用的是背景图片,那就基本上无计可施了。所以实际上基于字体大小来做图文混排设计的网页需要对图像的设计是有相当严格的要求的,即使如此仍无法完美解决,但复杂度却上升不少。

  基于字体大小的网页设计,将使长度变得的非常的不直观,导致设置一个宽度变得非常麻烦,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的解决方案。考试吧编辑整理

1 2  下一页
文章搜索
软件水平考试栏目导航
版权声明:如果软件水平考试网所转载内容不慎侵犯了您的权益,请与我们联系800@exam8.com,我们将会及时处理。如转载本软件水平考试网内容,请注明出处。