CSS 设定文本尺寸的属性
我要评论简介
这是一篇介绍如何使网站字体大小更加合理的文章,他教给我们什么才是字体标准化单位,并不是传统的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 的边距都会是成比例的（译者：都会是一个字）。
相关文章
- CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋2025-04-16
- CSS 中的 padding 和 margin 是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍 padding 和 margin 的概念、区别以及如何在实际项目中使用它们2025-04-07
- will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSS will-change 属性详解，感兴趣的朋友一起看看吧2025-04-07
- 本文给大家分享在 CSS 中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-04-07
在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将2025-04-07css中的 vertical-align与line-height作用详解
文章详细介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，感兴趣的朋友跟随小编一起看看吧2025-03-26浅析CSS 中z - index属性的作用及在什么情况下会失效
z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fixed或sticky），本文给大家介绍CSS 中z - index属性的作用2025-03-21- 文章详细介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等2025-03-18
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)
本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起2025-03-10
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)
本文介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式；通过数组语法,可以同时绑定多个类名或样式,此外2025-02-26
最新评论