快速业务通道

如何在CSS中设定文本的尺寸

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02
用的 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 的

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号