CSS 设定文本尺寸的属性

前端  /  管理员 发布于 7年前   456

简介

这是一篇介绍如何使网站字体大小更加合理的文章,他教给我们什么才是字体标准化单位,并不是传统的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.8333em}

这条样式规则表示所有的 #main_content 下的列表项目将显示成 10px。我们是通过同样直接的数学公式得出这个值的：

10 / 12 = 0.8333

但是如果列表嵌套又会怎么样呢？列表会越来越小。为什么？因为我们的规则明确的指出在 #main_content div 元素中的任何的列表项目都是它的父元素的 0.8333 倍。所以我们需要另外一条规则来防止这种“继承的缩小”

LI LI {font-size:1em}

(译者：这里，最好是 #main_content LI LI {font-size:1em}，以限定这条规则只能作用在 #main_content 下)

这就是说任何在其他列表项目内的列表项目应该保持同其父列表项目相同的尺寸。在开发期间，我通常采用一个完整的子选择器的集合来防止混乱的发生。

LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

就是这样。当通过 ems 控制文本大小的时候有一条原则要记住：文本的尺寸要和其父亲关联，并且使用简单的计算来做到这一点：

子元素像素值 / 父元素像素值 = 子元素 ems

一些有用的工具

Pixy 的 list computed styles 是个神话般显示文本尺寸层级（或者其他的CSS属性）的书签。Mozilla’s Inspector Inspector （Mozilla Dom 查看器）是一更强大的工具，他允许你查看附加在任何元素的 CSS 规则以及叠层优先级，因此你能知道为什么你的文本没有照着你的预想改变尺寸。
(译者：这里，我强烈推荐 Firebug， IE8  内置的 Dom 查看器也还不错)

最后，什么是 ems

典型的说，一个 em (发音为 emm) 是个垂直间距的印刷单位，是个浮动的（相对的）度量。一个 em 是一个文本尺寸的距离。 在10像素的字体里，一个 em 就是10像素。在18像素的字体里，它就是 18像素。因此， 在任何文本尺寸下，1em 的边距都会是成比例的（译者：都会是一个字）。


  • 上一条：
    检测用户浏览器是否支持CSS3的方法
    下一条：
    CSS 网页布局应该避免滥用div元素

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客