CSS设置字体大小
当你使用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 得局限性并不能非常方便的控制你的字体。
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。
但是为什么要使用这种抽象的像素值呢?这里有三个原因:
在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 来改变页面其他地方的尺寸。
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/
建议继续学习:
- Vim(gvim)编程字体推荐 (阅读:6371)
- 介绍“最好的编程字体”Monaco (阅读:6399)
- 等宽字体:程序员的字体 (阅读:4713)
- 解决Chrome最小字体限制 (阅读:3098)
- 默认Web字体样式 (阅读:2877)
- 字体文件也属于二进制文件 (阅读:2730)
- Google font api、web font与中文 (阅读:2460)
- 更改 Windows 10 命令行字体 (阅读:2598)
- 再谈 Web 默认字体 (阅读:2346)
- 三谈 Web 默认字体 (阅读:2210)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:标点符 来源: 标点符
- 标签: 字体
- 发布时间:2010-02-23 22:39:36
- [70] Twitter/微博客的学习摘要
- [66] 如何拿下简短的域名
- [65] IOS安全–浅谈关于IOS加固的几种方法
- [64] find命令的一点注意事项
- [63] android 开发入门
- [63] Go Reflect 性能
- [61] 流程管理与用户研究
- [59] Oracle MTS模式下 进程地址与会话信
- [59] 图书馆的世界纪录
- [59] 读书笔记-壹百度:百度十年千倍的29条法则