是时候不用考虑基于字体大小（em）的设计了
今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着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。常见有两种方法来进行网页设计：
- 设置默认字体大小为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尚未支持这个功能（Google的新推出的Chrome和Safari的基于同一个核心，很遗憾也不支持这个功能），而是像Firefox2一样支持文本缩放，但是具有讽刺意味的是Apple页面基本上都是基于px的，所以一缩放就乱掉，我深信Safari支持这个功能仅仅是时间问题（Safari和Chrome共同核心引擎Webkit已经有计划了）Chrome2和Safari4都已经支持这个功能。两年前有篇《95%的中国网站需要重写CSS》很流行，虽然保证用户的可访问性是应该的，但是应该找到其最佳实现的方法，毫无疑问浏览器的“全页面缩放”功能是最佳选择。从现在开始，基于px的设计不用再过于背负违背可用性的恶名了，基于em（文字大小）的设计不能给我们带来太多的好处，反而有可能耗费太多的精力挣扎于如何精确保护视觉设计上，设计师的精力应该更多的放在内容的理解、快速呈现、语义化、对屏幕阅读器的支持等等方面上。
全球范围内IE6已经不到40%了，中国用户比率应该高些，但趋势是一样的，毕竟IE8都出Beta了，IE6会很快成为历史的。如果你是偏执狂，需要考虑Firefox2和Safari的话，或许设置body{font-size:10px;}再基于em进行设计是一个不错的办法，中国雅虎的首页就是利用类似原理。总之，是时候不用考虑基于字体大小（em）的设计了，特别是针对IE6的解决方案。
北京时间6月17日 早上8点35分，还没有开放下载，估计是按美国华盛顿时间来的。
还是和平台的更新淘汰有关，xp sp3的发布延缓了vista的推进。而大部分国内用户还是十分“顽固”地使用着xp sp2（去网上看看那些流行的xxx版ghost系统们就知道了）；更何况大部分网民的使用习惯是被动式的，用了10年电脑的人不一定会装系统，就算更新到ie 7的网民也不一定知道ie 7的右下角有一个缩放功能。
不过，从中国国内商业网站的情况来看，基于px布局的页面占绝对统治地位。举例来说，Amazon和当当都是买书的，但前者是em后者是px，因为页面风格不一样。前者的设计理念在国内估计会被第一个枪掉～
看过《95%的中国网站需要重写CSS》一文我就认为，从标准化的可用性、用户体验上来说该文说的没错；但从实用性的成本和实际体验来说，在字体这一块，95%的中国网站不需要重写CSS。
可用性这种东西在国内有些时候是一种讽刺,因为不少设计师90%的工作是做在了为了让1%可能都不到的特殊用户满意上面,而中国人太多,就算抛弃了这1%也照样有巨量的使用率,而且这样的工作过程是零散的,琐碎的,没有一个系统的解决方式,所以有些流程中宁愿拿掉这个环节,有些悲凉
期待中
顶6z！
说的很有道理。
具有中国特色的中国国情。
这个中国特色体现在太多的地方！
同期待ff3
呵呵，良好的可访问性是能让所有人受益的，也是设计中应该考虑的，并不是为了可用性而可访问性，这些东西其实是很基础很系统的东西，不是完成之后的锦上添花，只不过现在我们被很多浮躁的过度设计蒙蔽了而已。为最可能广泛的用户提供最合适的方式虽然有些理想，但不是说说而已，应该是努力的方向。
我觉得基于可用性的妥协和不考虑可用性是两种不同的态度，不能因为中国网民的素质还不高，就不去做，用发展的眼光来看，是很有必要的
我的UB上还是RC5好像……
呵呵,这些问题都是你们考虑了…
俺不精于搞web,弄我的wordpress都好半天.开始顶.
不同标准，不同对待；考虑使用px,为了好精确控制布局，em可以解决所访问题，至于LZ说的只能解决2～3级的缩放，也确实。不过缩放多了也没什么意义。仁者见仁智者见智，对于本人，也支持LZ的想法,EM每次都要换算，好麻烦，Yui里面这点让很多人犯难。 ：）
@#2，#3，不要过多抱怨中国普通用户，作为开发者自己在开发过程中首先就应该严格要求自己的开发工作。
看到这么多的浏览器向web标准看齐，难道还看不出端倪？
在网站前端来说谁是根本，当然是前端开发者了。
不支持这种开发方式。现在越爱越多的OS都支持屏幕缩放了。我想网页本身就没必要做了。这样开发不仅仅延长周期，也对后期测试带来很大的困难。
问个问题，《超越CSS》里面讲到避免使用hack，而针对ie的hack使用条件注释。
开发网站的时候，基于标准开发网页，这是一种比较理想化的状态，对于将来浏览器的改变，网站维护将会比较容易。对于目前的hack采用ie的条件注释。
但我查看了几个电子商务的网站和门户网站，都没有采用这种条件注释的方式。
使用条件注释有什么不妥之处吗？
个人感觉可用性这个东西，在某一个业务领域里面是挺重要的，尤其是专注于某个领域的电子商务。
如则名所说，我也觉得网站的开发的根本确实是前端开发者。当然这个根本是从用户的角度来说的。UED会考虑到与用户相关的方方面面的交互。这些交互包括用户看到的与潜意识里看不到。这些的好坏会让用户直观的觉得网站是否好用，是否能留住用户。
程序也非常的重要，但用户不会关心你的业务逻辑是怎么实现的。而且一般进行用户体验的前端工作人员需要掌握与用户相关的业务逻辑。
打个比方，一个用户去商城买东西，用户体验要做到让用户轻松的获取到商品信息，直到提交订单付款，并获取付款后的商城的信息反馈的一个过程。用户这个过程做完，留给我们的只是几个数据：订购的商品，数量，及一些快递需要的信息。用户体验就是要做到用户舒坦的给我们这些数据。程序就是拿着每一步用户给出的这些数据去进行相关的业务领域的逻辑处理，包括怎么算折扣价，及一些领域的业务逻辑的处理，然后再反馈出一些数据供用户进行下一步的交互操作。
这个过程如果不是那么的亲切，用户或许进行到一半就不会再玩下去了。
（个人见解）
[...] 原文：http://dancewithnet.com/2008/06/17/ [...]
我觉得还是很有必要的
楼主主要业务是中文网站 当然定个12px 一般人都没啥问题
但是如果你的客户是英文的或者其他西文字符的话
这招就不灵了
譬如你给美国的某些机构做开发 你就必须遵循他们的法律
像508都是必须要考虑的
所以不能一概而论
如果你能处理得当的话 使用em也可以用的运筹帷幄，即便是中文网页
我好像从来没这样做过，从我做网页设计以来都是用的px
EM单位不知道有多少人用过，做大型网站的时候很不适合。
他是相对的单位，而且相对父级。麻烦的很，如果没有特殊的需要建议不使用EM做单位。
一直使用px 和百分比例
都是高手啊
学习了》。。
很不错的文章，顶下！！
[...] font-size采用px, 不采用em. 理由是em带来的可用性提升很有限，同时基于em很难保证视觉设计的精确性，并且现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能，是时候不用考虑基于字体大小（em）的设计了。 [...]
[...] font-size采用px, 不采用em. 理由是em带来的可用性提升很有限，同时基于em很难保证视觉设计的精确性，并且现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能，是时候不用考虑基于字体大小（em）的设计了。 [...]
[...] font-size采用px, 不采用em. 理由是em带来的可用性提升很有限，同时基于em很难保证视觉设计的精确性，并且现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能，是时候不用考虑基于字体大小（em）的设计了。 [...]
弱弱的问一下，基于12px的1.1em，或者说1.2em，和13px有什么区别吗？比如，我可能觉得12px太小，而13px又太大，而12.5px又好像各个浏览器不一样，恩，都很模糊，以前很喜欢英文的11px，但是，中文遇到11px就傻了，有时甚至想能不能英文用11px，中文12px，但是中英混排就麻烦……
有点混乱。
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
我觉得默认就开始使用全局缩放是个错误的决定，而Safari现在做的是对的。因为css程序员应该有控制是否需要全局缩放的能力，而相对字体与绝对字体大小按照设计就应该负责告诉浏览器你是要使用哪种单位缩放方式。 http://tin.zztin.com/2009/using-em-and-px-together-in-web-page-design/
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
目前来说 针对IE才是明智的
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] font-size采用px, 不采用em. 理由是em带来的可用性提升很有限，同时基于em很难保证视觉设计的精确性，并且现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能，是时候不用考虑基于字体大小（em）的设计了。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] font-size采用px, 不采用em. 理由是em带来的可用性提升很有限，同时基于em很难保证视觉设计的精确性，并且现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能，是时候不用考虑基于字体大小（em）的设计了。 [...]
[...] 以上学习笔记来源于一下文章的分享: http://lifesinger.org/blog/2009/11/web-default-font/http://webteam.tencent.com/?p=1503http://dancewithnet.com/2008/06/17/it-is-time-to-discard-font-size-adjustments/http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-4.htmlhttp://dancewithnet.com/2009/11/22/default-web-font-style/http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.htmlhttp://lifesinger.org/blog/2009/08/font-family-in-css/ [...]
[...] 网页默认字体详解 默认Web字体样式 @ 随网之舞 对上文的补充 再谈 Web 默认字体 @岁月如歌 是时候不用考虑基于字体大小（em）的设计了 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] em的优势是，在改变字体尺寸的基数时，浏览器也会相应的调整后代元素大小。而且在IE6中也能使字体放大缩小功能起到作用。 劣势是要精确控制的话会相对困难。也有人提出是时候不用考虑基于字体大小（em）的设计了，主要是因为现在多数浏览器都已经有了更完善的页面缩放功能，对px同样有效。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
目前来说 针对IE才是明智的
[...] 不用考虑基于字体大小（em）的设计。 [...]
以前用IE内核可以自动放大一些看不清的小字，现在升级到IE9反而不行了，呵呵
[...] 6 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]
在我还没做前端时就常 google 到这里，现在我也开始做前端了。非常喜欢您网站干净整洁的风格。
我看了下源码，您网站的主题名字应该少了个字母 ‘Theme Name: Da
nce With Net’[...] 的确，在PC上我们已经不再鼓励使用EM进行设计，因为现代的浏览器都支持了ctrl+、ctrl-的整体缩放，秦歌有一篇详细的文章：是时候不用考虑基于字体大小（em）的设计了。然而当你的Mobile App原先是为480×800分辨率以上的设备设计，现在突然要支持320*480的设备时，这种设计将为你节省很多的时间，将字号按分辨率的缩放比率进行调整即可，例子中320下就不再需要设置h1的字号了，同理宽度、高度也可以依赖em进行设计。 [...]
[...] 不用考虑基于字体大小（em）的设计。 [...]