如何在CSS中设定文本的尺寸
日期：2014-01-18 浏览次数：21181 次
简介
这是一篇引见如何使网站字体大小愈加合理的文章,他教给我们什么才是字体标准化单位,并不是传统的px,而是em!
典型的说，一个 em (发音为 emm) 是个垂直间距的印刷单位，是个浮动的（绝对的）度量。一个 em 是一个文本尺寸的距离。 在10像素的字体里，一个 em 就是10像素。在18像素的字体里，它就是 18像素。因此， 在任何文本尺寸下，1em 的边距都会是成比例的
如何在CSS中设定文本的尺寸
使用 CSS 指定屏幕中文本的尺寸，可以通过像素，ems，或者关键字。众所周知，通过像素限定尺寸很容易：给定一个选择器(selector) 再设置一个 font-size 即可--不用太费心思。用关键字限定尺寸则愈加复杂而且还需求一点变通措施，但是侥幸的是这项技术有完善的文档。于是就剩下 ems 了。人们普遍不注重它。“Ems 太缺乏分歧性了，”他们说，“它们太难了；它们基本不管用。” 这也许算是一种常识吧，不过，如果世上真有FUD（fear, uncertainty and doubt）的实际例子的话，这就是一个。我如今就让你看看：em用起来也可以跟像素一样简便。
为什么要使用 ems？
如果这个世界是个理想的地方，我们将全部使用像素。但是它不是，我们需求同破烂浏览器斗争。 通过像素限定尺寸的文字，IE/Win 将不允许读者其改变的大小（译者：仅限于IE6，在IE7以上的版本，声明成像素的文字仍然可以被改变尺寸，鉴于IE6曾经不在是主流浏览器了，作者这个2004年观点曾经过时了）。无论你能否喜欢，你的读者在某些地方的确想要改变文本的大小。也许他们近视，正在做一个演示，正在使用一个可笑的高分辨率的手提电脑，或者就是由于眼睛累了。所以除非你知道（不是认为）你的读者不使用 IE/Win 或者从来不希望改变他们的文本大小，那么像素(pixels)仍然是个可用的处理方案。
依托关键字文本尺寸的设定允许所有的浏览器改变文本的大小，所以这也是一种可能，但是我没有发现它能给于我像素普通的精确。然而使用 ems， 允许所有的浏览器改变文本大小并且也提供了像素级别的精度，因此他们成为我单位选择的倾向。
继续
好，让我们钻进 ems。 我将粗略的展现给你如何在一篇文档中用ems改变文本的尺寸。我将假定我们曾经把浏览器设置成“中”文本大小。在所有现代浏览器中，中等大小的文本的默认尺寸是16px。我们的第一步就是要要通过将设定body的尺寸设成 62.5% 来把整个文档的这个尺寸改小。
BODY {font-size:62.5%}
这会把 16px 下调至仅仅是我正在使用的 10px ， 由于它是一个漂亮的约整数，好比是这样一个目的 - 10px 文本对于真实世界来说太小了（译者：我不太知道怎样翻译这段话 ...）。从如今开始，很容易来用像素思考但是却是用 ems 来设定文本大小的。 0.8em 是8像素， 1.6em是 16px，等等。如果你正在用CSS来规划你的文档（你正在这样做，对吗？）那么你或许几个div 来组合元素。将 text-size 使用到这些 div 上那么你的事儿也就几乎做完了。 考虑一下包括头和尾的两列的规划:
<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>
#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}所以这将使文档的导航条和侧边栏的文本显示为10px，次要内容是 12px 以及脚注为 9px。如今这儿还遗留这几个需求被列出的异常景象（即便是使用像素，你也不得不考虑这个）。在 Mozilla 系浏览器中，在我们前面所述的 #main_content 内，所有的标题元素中的 div 将显示 12px，无论他们在 H1 或者 H6 中，然而就像预料中的一样，其他的浏览器将标题显示成其他的尺寸。将 text-size 使用到所有的标题中，将带来强壮的跨浏览器性，比如：
H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */在表单和表格中一个类似的任务还要去做，强制表单控件和单元格承继正确的尺寸（次要是为了 IE/Win）:
INPUT, SELECT, TH, TD {font-size:1em}因此最终 tweak and the bit folks （译者：不知道怎样翻译，估量是研讨这方的爱好者，类似于极客 Geek）似乎发现了戈多的小窍门：处理嵌套元素。我们曾经在标题元素上于这方面有所涉及，但是从如今开始，让我们更细心的的看看实际上发生了什么。首先我们将我们的 BODY 的文本尺寸改为10px； 相当于默认大小的 62.6%
16 x 0.625 = 10然后我们说我们次要的内容应该按照12px来显示。如果我们什么都不做， #main_content div （译者：id为 main_content 的 div 元素）就会显示成10px，由于它会从 body 元素承继字体大小。也就是说当我们使用 ems 的时候，我们总是将文本的尺寸同其父元素关联起来。
子元素像素值 / 父元素像素值 = 子元素 ems
12 / 10 = 1.2
下面我们希望我们的标题一为 24px。 h1 的父就是 #main_content div，我们知道它是 12px。 为了让标题为 12px，我们需求将其加倍，所以 ems 就是：
24/12 = 2
接着，这里有个小窍门，像这样使用规则：
#main_content LI {font-size:0.8333e
