本篇文章就web设计中“如何设定页面文字大小”展开讨论。
为什么不采用像素
现今大多数网站都是以“像素”来设置页面文字，一般都是设置网页中<body>元素为基准大小，这个大小一般为12px。我之前也是这样做的。
这个设计的优点是不论用户用哪个浏览器或者设备查看网页，文字都会显示一样的大小，这种统一的、能事先确定大小的像素单位正是设计师们所乐意采用的。因为它很方便。
可是也是会出现一些问题：
web浏览器通常会给用户提供一些方法，让他们可以随意改变页面上文字的大小，以取代设计师原本的设定。这是个很好的功能，对于那些视力较差的用户尤为实用！这些用户可以通过一些相应的菜单来改变网页中字体的大小。
问题来了，当以像素为单位设定了文字的大小之后，windows平台上的internet explorer用户再无法随意地改变这个大小了。因此，使用像素虽然可以让设计师非常精确地控制尺寸，但同时也会妨碍ie/win用户按照自己的意愿调整文字大小。这一点是很糟糕的。
所以以后设计网页时要记住这一点：要允许用户自由控制任何页面的文字大小。
结合使用关键字和百分比值
关键字
网页设计中有7个关键字可以使用：
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
W3C建议浏览器厂商将两个相邻关键字之间的比例因子设为1.5，并推荐让这个比例保持恒定，而不管字体实际显示为多大。
关键字设定的字体大小与浏览器当前的设置有关。换句话说，如果用户调整了浏览器的设置，使其基准字体大小比默认值更大或更小些，则该关键字的显示结果就会相对于新基准值成比例变化。
所以，为了能够让用户自由地改变页面文字大小，关键字为您提供了一种简单的、易于掌握的方法。
使用关键字作为基准值，使用百分比值来获取不同的尺寸
对于一般浏览器，使用small作为基准大小和使用12px差不多。也就是说，下面的两个声明可以看成等效的，只不过一个可以灵活的改变文字大小而已。
body{
font-size:small;
}
body{
font-size:12px;
}
设置基准值
body{
font-size:small;
}
使用百分比值来获取不同尺寸
body{
font-size:small;
}
h1{
font-size:150%;
}
因为h1对象总是包含在body对象之中，所以能够保证它的文字大小将是small的150%。这就是以上代码的含义啦。
所以在以后设置网页中文字时，完全可以这样设置：
body{
font-size:small;
}
h1{
font-size:150%;
}
h2{
font-size:130%;
}
h3{
font-size:120%;
}
ul li{
font-size:100%;
}
.note{
font-size:90%;
}
思路：设定一个基准关键字，然后对于其他对象，使用百分比值来增大或减小字体大小。于是，当基准值改变后，各个对象的字体大小也会随之改变。
优势
使用这种基准值+百分比值模型的一个很大优势是：当想改变默认的页面字体大小时，只需要修改body元素中的单个声明。其他所有字体大小被设置为百分比值的对象都受这个顶级管辖。所以当small以为large后，其他各个对象的字体大小将会相应地按比例发生改变。
嵌套百分比值
例如有下面一段html代码：
<body>
<div id="container">
<h1>this is a title</h1>
<p>this is body at default base size.</p>
</div>
</body>
它的css代码是这样的：
body{
font-size:small;
}
#container{
font-size:95%;
}
h1{
font-size:150%;
}
这个就是嵌套百分比值的使用了。此时h1的大小不再和之前大小一样了，因为它的外层嵌套了一个id为container的div层。而根据以上的css设置，此时h1的大小是之前的95%了。
优势：能够更加精确地设定文字大小值。
通过em实现灵活的文字
em单位能够替代关键字来对大小进行设置，对于ie/win平台，它具有与关键字相同的优势：允许用户调整字体大小。同时，它是一个相对单位，能够提供更高的精度和更好的控制。用它来设置页面默认的基准大小时，那些习惯于使用像素为单位的设计师也会感觉比较熟悉。
现在em这个也是用的比较多的一个方法，这个东西还是非常的实用的。
在设置字体大小、行高以及元素之间的空隙时使用em的优势在于：调整文字大小后，这些对象的尺寸也会按比例发生改变。
Richard Rutter介绍了一个巧妙的方法来用em设置大小的基准值（http://clagnut.com/blog/348/)。其中的单位与像素等价。它假定浏览器默认的文字大小设置为medium，大多数情况下这个值为16px。
Richard的方法首先是将body元素中的基准字体大小设置为62.5%：
body{ font-size:62.5%; }
这个神奇的百分比值实际上是将默认的中等字体大小从16px缩小为10px，Richard解释其中的原因是：使用10px作为基准，那么以后处理的都是很方便的整数，并且在用em进行设置的时候可以通过使用像素的方式进行考虑。
例如，在body中将字体大小基准值设置为62.5%后，1em将显示为10px，1.2em显示为12px，0.9em显示为9px，1.8em显示为18px。如果要为页面上的不同元素指定不同的值，那么代码看起来应该如下所示：
body{ font-size:62.5%; } /* 基准为10px */
h1{ font-size:2em; } /* 20px */
h2{ font-size:1.8em; } /* 18px */
p{ font-size:1.2em; } /* 12px */
#sidebar{ font-size:1em; } /* 10px */
要注意的一点便是嵌套关系，em是相对于父元素的，这点要牢记。
p{ font-size:1.2em; } /* 12px */
p abbr{ font-size:2em; } /* 24px */
对于上面这个代码，由于abbr是p的子元素，所以2em是相对于p的，所以最终的显示效果为：
12px*2=24px
rem单位
css中引入了rem单位，可以解决多层嵌套中复杂计算的问题。
em的值依赖于父元素的字体大小，但是使用rem则不必考虑上下文的嵌套，只需根据根元素指定大小。
使用rem时，不管对象位于文档中的什么位置，问题可以确信其字体大小是相对于基准（根）字体大小设定的。同时，与em类似，rem是一个相对单位，在ie/win下可以自由调整。
浏览器的支持：Safari 5、Chrome、Firefox 3.6+、Opera 12和IE9。对于较老的浏览器，Jonathan Snook创建了一个优秀的解决方案：对于支持rem的浏览器，使用rem；对于不支持rem的浏览器，使用px。在他的文章“Font Sizing with rem”中，Snook使用了如下的代码（http://snook.ca/archives/html_and_css/font-size-with-rem）：
body{
font-size:62.5%;
}
h1{
font-size:12px;
font-size:1.2rem;
}
p{
font-size:24px;
font-size:2.4rem;
}
还不支持rem的浏览器将采用由px设定的第一条规则，而忽略其后用rem设定的规则。而支持rem的浏览器将采用第二条规则，该规则会覆盖第一条规则。
灵活的文字是网页设计中的基础，以后的学习都将建立在可以随意缩放页面文字大小的基础上进行的。
