标点符(钱魏 Way)

px – em – % – pt – keyword

当你使用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 设置的为mediumchild 设置的是 larger (注意是larger而不是刚才的large),child 的尺寸就会比 parents 大。改变 parent 就会改变 child。

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

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

px

如果你想更加精细的控制字体尺寸,使用像素值 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

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。

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

  1. 在IE 6下可以自己设定大小
  2. 它是基于一个其他尺寸的,可以通过改变基数来做到整体的改变
  3. 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 来改变页面其他地方的尺寸。

pt

最后的度量单位是point values (pt). Point values只是用于印刷! 1 point 是真实生活中的度量单位。72pts = 1 英寸. 1英寸 = 真实生活中的1英寸,不是屏幕上显示的1英寸。

和像素值一样,point sizes 在纸上也是非常精密的。不管什么平台使用point size设置打印的字体是最好的选择。

因为分辨率的不同,我们不在屏幕上使用point sizes。

 

翻译自:http://css-tricks.com/css-font-size/

码字很辛苦,转载请注明来自标点符《px – em – % – pt – keyword》

评论