起因是下面的这句话：

font-size: 75%; /* Resets 1em to 11px */

这是我曾经喜欢的wordpress主题 Bito 的第一句CSS。印象里还是记得默认值是16px，那么75%就是12px了。不过这只是表面问题，其实大部分人都不怎么关系字体大小的本质。

从标准看起

W3Cschools的font-size参考相当简单，只是简单的列举了属性的可取值。并且CSS2.1 Specification RC20090908里，关于font-size的定义也并不多。

大体上，font-size的值非常宽泛，即可以是关键词定义的绝对值，可以是百分比或者 em 的相对值，还可以是绝对单位px。在实际工作中，我自己都似乎快习惯于用px定义字体大小，很少使用到那些关键字或者比例，但可能这不是个好习惯。回想自己学习CSS的过程里的例项，大部分都是用em或者百分比的。

关于px

对font-size直接应用px值，这样做非常精确，而且也方便，所以我们习以为常。当对font-size赋予px值意味着浏览器将会把文本渲染成指定的像素那般高。并且通常情况是，西文字符在9px以下、中文字符在12px以下时，文字将难以辨认。使用像素单位的主要问题是两个：

1. 当把文字设定为固定px值后，IE6以下浏览器将不能对其缩放。
2. 固定尺寸后失去级联特性。

老外的眼里，第一点似乎是个大问题，因为他们把网站的可访问性和易用性看的很重，无法看清字几乎是不能容忍的。而第二点，只要不做弹性布局或者设置字体调节器之类的应用，并且针对的只是显示器，也就不是大问题。这恐怕也是导致px这么泛滥的原因。好用，简单，并且最重要的是——精确。

但是对于易用性来说，px似乎不是个好东西。
W3C Web 可访问性指南：在标记语言的属性值和样式表属性值里使用相对单位而不是绝对单位。[...]比如，在CSS里，使用 ‘em’ 或者 百分比长度 而不是使用绝对单位 ‘pt’ 或者 ‘cm’ 。

百分比的使用

百分比和em都是相对值，相对于父元素的字体大小。1em等于1个字体的大小，Chris Coyier认为em是基于大写字母 M 的宽度(除此以外，我找不到更好的参考)。使用百分比和em可以很好使得各个元素间产生级联的比例关系。

鉴于windows的浏览器，默认的字体大小是medium，即 16ppem (后面会讲到)下显示为16px。所以75%就是12px，而62.5%就是10px。

基于font-sizeのパーセント表記一覧里的百分比的零散表格，我重新组织了下面这张整表。下表仅仅作为参考，因为百分比的微弱递减或递增不会对文本产生可视化的效果(当然也有例外)，反而容易产生出混乱的级联百分比关系。

之所以选择了参考了这位日本开发者的资料是有原因的。比如，我们常常全局定义字体的相对medium(通常为16px)的62.5%，也就是10px，然后再对文档的个个其他部分定义em值。相对于10px，1.2em就是12px，1.6em就是16px，依次类推。这样的比例使用起来很直观，并且会在所有的浏览器里表现完好，当然除了IE。

IE会错误的显示字体大小(感觉上是字体框架有细微的变大)，并且仅限于中文。除非我们将比例设置成63%而不是62.5%。所以当我看到这张表中63%的时候，我觉得同是非西欧字符，这张表应该更具有参考价值。不过这些值我也没能自己去全部测试，偷懒一下～

em似乎比百分数更加直观，而且对于一个字体的宽度的把握往往也更容易。同时它们有相同的级联性，使用的时候总是要避免规则的叠加。比如定义 div{font-size:1.2em;} ，那么在div里包含div就会出问题。1.2emx1.2em的叠加会使得文字比想象中的大——但这还不要紧，如果使用的是0.8em？缩小倍率的多次叠加很快会使得文字变得无法分辨。

无论是em还是百分比，都是相对值。并且常常相对于medium。但是关于medium这类关键字，就有了更多的话题。

关键字

我对于font-size的理解一直停留在上面说的那些，直到半个月前，我读到这篇Toward a standard font size interval system。

回到之前的CSS2.1 Specification RC20090908，标准把关键字定义为这样：

下面这张图，更加直观些。但是注意第二行。同样对于English Font加上larger，IE8和FF渲染为18px，Opera、Chrome和Safari则渲染为19px。

下面的表截取自Toward a standard font size interval system里的Synoptic table，对应于windows常用的96dpi的情况。是的，96dpi，我们几乎从来不去改变这个默认的值，除非也许某个人因为高分屏字太小的折磨，而主动调大到了120dpi。

牵扯到一个很重要的概念，ppem。它指的是Pixels per em，即每个字体大小的像素数，定义了字符在屏幕上的易读性。关于更多的信息，我强烈建议阅读Toward a standard font size interval system原文。

当把xp的dpi从96调整到120， 整个系统的尺寸，包括图形和文字都被放大了。此时，如果打开IE，font-size:medium 不再是16px，而是20px。虽然我也试过Chrome和FireFox，但它们没有变化。我不明白原因，如果有人知道，麻烦请告诉我声: ）

这再次的提醒了我们，CSS不是只为显示器而设计的，而且也不是专为windows而设计的。我们有时可能需要考虑更多更多。
水平有限，文中如有错误望指正~

整理行装的时候，瞥见这张一年半前的照片，然后在柜子了浏览了一下这些见证过往的书籍。原来也曾这么这么地努力过:)。现在，书更多了一些，有几本书借出去了，所以合影似乎没多大的意义。所以仍旧用这张照片，怀念下阳光里，一本书，一首曲子的时光。

以前总是看别人的书评。当然在不看书评前，自己总是乱买书，结果总是有几本书比较糟糕。但好在数量不是很多。在即将重新启程的当前，自己也该写个书评总结回顾下。题外话，书看多了，也没啥好的。

《JavaScript 权威指南》— David Flanagan

厚的书总之给人无形的压迫感，JavaScript权威指南，也就是大家俗称的犀牛书，就是这么一本近千页的书，尽管其中有近三分之一是以参考手册的形式。这本书虽然全面，但是对于讲解过程却并不是很平和。在我看来，这更像是一本参考书而非教学书。不仅读来相对枯燥，整个逻辑更是程序员固有的棱角分明，我觉得对于初学者完全不适合。这部书大而全，讲述了JavaScript的方方面面，但深入度却都不是最佳。可以说这是本必备的不错的参考书，如果用作学习，恐怕下面讲的《JavaScript 高级程序设计》更为合适。

《JavaScript DOM 编程艺术》— Jeremy Keith

这本书的翻译成编程艺术有点夸大其辞，其实英文名原名是《DOM Scripting Web Design with JavaScript and Document Obect Model》。主讲DOM，讲解也非常清晰，没有很多生僻的东西。因为内容牵扯的不深，即使是初学也能很好的阅读。

《JavaScript 高级程序设计》— Nicholas C. Zakas

关于JavaScript，我最喜欢的就是这本Zakas写的JavaScript高级程序设计。该书的层次结构非常清晰，而且内容非常精炼！我觉得这本书是最好的JS入门书籍，并且在很长的一段时间里，它扮演着睿智的讲师。文中涉及到的细节，特别是浏览器差异的细节，非常深入。可能对于没有编程经验的人来说，这本书看起来会有点费力。但完全不能因为“高级”二字而认为这本书很难。

《Ajax 高级程序设计》— Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett

同样是Zakas的书，特点是讲解透彻。不过这本书没有完整看完，所以不妄加评论。

《精通 CSS 高级Web标准解决方案》— Andy Budd, Cameron Moll, Simon Collison

超级薄的一本书！才200页。但确是本值得一看的好书。书里基本没有废话，涉及到的面也算的上广，最重要的是讲解的很透彻。包括浮动、定位，甚至是滑动门技术、CSS hack。但是强行把CSS hack 翻译成 CSS招数之类的，还是有点不习惯。除了翻译方面的一些小问题，这本书相当好。甚至语言风格也像是对话一般，读起来感觉不是很累。

《Eric Meyer 谈 CSS(卷1)》— Eric A. Meyer

《Eric Meyer 谈 CSS(卷2)》— Eric A. Meyer

两本实践的书，每本约10个案例，讲述了使用CSS的整个过程。我就是通过这23个例子走过来的:)。一开始虽然学了CSS但是对于使用完全没有实感。不过经过这两本书后就感觉大不一样了。如果作为实践过程，这两本非常有效果。但是如果作为参考，这两本就没什么价值了。

《XML 基础教程 入门、DOM、Ajax与Flash》— Sas Jacobs

又是一本涵盖面较为广泛的书，不仅仅讲述XML基本(事实上是大部分的内容)，还牵扯到XML的实际使用，特别是Ajax和Flash方面的应用。

《PHP 程序设计》— Rasmus Lerdorf, Kevin Tatroe, Pter MacIntyre

《PHP & MySQL Web 数据库应用开发指南》— Hugh E. Williams

这两本书我都只是匆匆浏览了一下，以便了解PHP这门语言。PHP 程序设计中规中矩，更像一本语言参考书。后者则是既包含了语法的讲解，还穿插了MySQL的部分，最后更是用例子来指导整个教学。由于是浏览，对于内容的把握细致不到哪里，但我觉得前者是一本中规中矩的书，不能说讲的很出彩。后者则是一本理论和实践相结合的书，里面的例子很丰富，非常有参考价值。

《Flash ActionScript 3 殿堂之路》— 孙颖

这里唯一一本国人写的书。并且再次证明了，国人的书还有很长的路要走。我并不是说作者不行，只是并不是所有的人都适合写书，并不是强人写出的书就是好书。这本书我完整的看完了，作者试图用浅显的例子说明程序的思路，但这反而让已经有程序概念的人混淆。其中的好几个类比的例子并不是很合适。但在国内AS3刚刚起步缺乏优秀教程的时候，这本书适时地出现并填补了这个空白。

就写这么多吧，发觉自己不怎么会评论呢:)~

关于浏览器模式，一直以来的理解是这样的：浏览器厂商出于那些老站点的向后兼容的目的，创建了两种模式。即标准模式(standards mode)和怪异模式(quirks mode)。在标准模式里，浏览器按照规范渲染页面，而在怪异模式里，浏览器以一种老式的或者是模拟老式浏览器的渲染方式表现页面。

这些并没有错，但是还不够全面和深入。当我回顾《CSS Mastery》的时候，也让我想起了很多渐渐淡忘的、并且也可能是无关紧要的其他碎片。
比如，两种模式最大的差异的例子就是IE盒模型的解释。IE如此，Opera 7也是如此。再比如，Mozilla和Safari的第三种“准标准模式(almost standards mode)”，只是在处理表格的方式上有些细微的差异，其他与标准模式无异。等等。

一直以来，确保DOCTYPE的正确也是非常重要的事。浏览器根据DOCTYPE是否存在以及是何种DOCTYPE来确定渲染方式。如果总结如表，应该是这个样子。

另外一个可能有点过时的，是Eric Meyer关于DOCTYPE switching的表格。多年之后我再去看这个链接的时候，发觉它居然还在:)
而现在，我更喜欢看QuirksMode上的资料。

实际工作中，一般都不会忘记去添加DOCTYPE，所以很多情况都只是我们无意为之。比如IE6，当DOCTYPE不是页面的第一个元素的时候，就会进入怪异模式。这导致在页面开头添加XML文件的可选声明

<?xml version="1.0" encoding="utf-8"?>

也会使页面表现出人意料。之后的IE7修复了这个bug，但却不完全。在IE7中，一个xml声明并不会再导致进入怪异模式，但是这并不表示在DOCTYPE之前加入其他东西也能不触发。比如html注释。

<?xml version="1.0" encoding="utf-8"?> 
<!-- ... and keep IE7 in quirks mode --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这段代码依旧触发IE7的怪异模式，而触发的原因仅仅只是一段html注释。所以在DOCTYPE前，一段html注释也会导致怪异模式下不可预料的表现。

另一个需要小心的陷阱就是BOM头。当php处理UTF文件的时候会把BOM读成字符，include之后就可能会跑到DOCTYPE前面，从而再次触发IE的怪异模式。所以保存UTF8编码的时候可以选无BOM，BOM对于UTF8的意义本来就不大。

前段时间写的HTML5，DOCTYPE简化到只剩下

<!DOCTYPE html>

对此w3cschool上的解释是这样的：HTML 4.01 中的 doctype 需要引用一个 DTD，这是因为 HTML 4.01 基于 SGML。HTML 5 不基于 SGML，也不需要引用 DTD，但是需要声明文档类型让浏览器按照它们应该的方式来运行。

事实证明，IE只要认到 <!DOCTYPE html 这串字符就会用标准模式...

也许HTML5的日子真的就这么迫近了，新的总结，那就是后话了，呵呵。
最后记录些DOCTYPE，发觉自己总是在复制他们~

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">