CSS设置字体大小 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> CSS设置字体大小

CSS设置字体大小

浏览:3660次出处信息

当你使用CSS设置字体大小事，你有很多种选择，你可以使用“keyword”，像 p { font-size: small; } 或者是一个数值。当使用数值时，你需要考虑使用哪种单位，那一种单位是最好的呢？下面让我来看看。

Keyword

有效地设置字体尺寸的keyword有：xx-small, x-small, small, medium, large, x-large, and xx-large 还有比较 keyword（smaller 和 larger）。

令人惊奇的是，各种平台和浏览器都能很好的兼容 keyword font size，看一下在Opera, Firefox, IE 6, and Safari的测试页面：

我们可以注意到，他们非常接近，但是在字体宽度和字体高度上有些不同。

当使用keywords时，父标签和子标签存在着一定的相互关系。例如，当 parent 设置为 medium child 设置为 large. 只有child 的 large 会起到作用。但是，如果 parent 设置的为medium 而 child 设置的是 larger （注意是larger而不是刚才的large），child 的尺寸就会比 parents 大。改变 parent 就会改变 child。

使用Keywords 是一种使用在 web 上的非常好的方式。在body上设置keyword font-size，然后在页面的其他地方使用相对尺寸是一种非常流行的技术。这使得在页面上设置字体的大小（比如说是用Javascript）变得非常容易，很容易整体调整页面的尺寸。

但是，由于 keywords 得局限性并不能非常方便的控制你的字体。

如果你想更加精细的控制字体尺寸，使用像素值 pixel values (px) 是个非常不错的选择。在一个电脑屏幕上，没有比单个像素更小的单位了，使用像素值作为字体单位，你就是告诉浏览器你的字体所占的像素值：

Windows, Mac, Linux, IE, Firefox, Chrome, 不管是什么，当一个字体被设置成14px时，它永远是14px。但是，这并不代表没有任何差异，在下面的测试中，可以看到它和keyword一样有些差异。

由于像素值的特性，他们并不是相关的，如果一个parent 标签被设置为18px，一个child被设置为16px，child就是16px。但是，字体尺寸设置可以一起设置。比如，如果一个 parent 被设置为16px 而 child 被设置为 larger，child 就会比 parent 大，如下图所示：

“Larger” 把parent的16px转成20px，增加了25%。

像素值在一段时间内在可用性和易用性方面一个非常糟糕过去，在IE 6及以下的浏览器中，使用像素值设定的大小用户不能重新设定字体的大小。这就意味着年轻的设计者将字体设置为12px正好合适，但是稍微年长点的人希望改变字体尺寸去阅读它却无法做到。这个是IE6的原因，并不是我们的原因，但是我们必须去处理它

使用像素值设定字体尺寸是最精确的，同时也是最满意的，但是考虑到一些用户还在使用IE6，我们也要考虑到这一点。

Em 值可能是所有值中最难的，因为它是一个非常随意和抽象的概念。这里是它的定义：1em是当前标签的尺寸，如果你没有在页面上设置任何字体尺寸，那会是浏览器的默认尺寸，大部分是16px。所以默认是 1em = 16px。如果你把你的body设置为20px，那么 1em = 20 px。

我认为“em”值是基于大写字母M设定的。

当我们开始设置比较复杂的字体尺寸时，事情变得有些困难。比如说我们需要一个比价大的 header，我们可以设置为 h1 { font-size: 2em; } 其中 “2″ 实际上是em基数的倍数。如果基数是16px，那个header就是32px。这个数学公式非常清晰，但是你可以想象有时它并不是一个整数。

一个使用em非常流行的方法是设置body的字号为62.5%。因为浏览器的默认尺寸是16px，设置完后可以使他变成10px（我们不直接把他设置为10px，因为像素值并不是相关的）。使用10作为一个基数要比使用16来的容易的多。如果你需要设置字体尺寸为18px，只需设置为 font-size: 1.8em。

但是为什么要使用这种抽象的像素值呢？这里有三个原因：

在IE 6下可以自己设定大小它是基于一个其他尺寸的，可以通过改变基数来做到整体的改变EM像是个魔法

其中第一个原因是主要的元婴，如果你想使用像素值来设定字体大小，但又不想有易用性方面的问题，em是你最好的选择。

Em 不是只适用于字体，这也是一个长度单位（高、宽等）。可变宽度的网站使用em值来设定没一个值，是的网站具有可伸缩性，意味着当你改变一个尺寸的时候所有的尺寸跟着改变。em 在这种情况下和其他尺寸有一个直接的关系。如果你有一个10em的box，在它里面是1em的文字，它会占用1/10高度。这样的比例让em成为一个很好的设计技巧。

还有一个潜在的问题，就是他的相关性，所有的em值都取决于parents的值。如果把em代替像素值来用，就会带来问题。比如，你可能将你的“p”（段落）和“li”（列表）设置为1.2em。今天看上去还不错，但是明天发布了一篇文章的段落中含有一个列表。那边列表的尺寸要比其他的都大（1.2 x 1.2）。除了移除标签，没有什么更好的方法。

百分比怎么使用相当的明显，它们的工作方式和你想象的一样。如果一个 parent 的尺寸是20px，child的尺寸是50%，那么它就是10px。就像em的规则一样。同样它也会出现和em一样的问题。

一个非常流行的技术使用百分比来设定字体大小：所以用像“small”设定body，使用百分比来设定其他所有的元素。这样就可以通过改变 keyword 来改变页面其他地方的尺寸。