【译】样式研究：设置易读的文字

原文地址：http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

样式研究是关于网页字体的一系列持续的客座文章。在这篇文章中，Ethan Marcotte 给font size的使用提出了一些建议。

是的，没错。这个博客就是讲的如何在网页中设置文本的大小。

瞧，我知道你还在那里。我可以听见你的呼吸。

显然，调整文字大小并不是富有吸引力的话题。重要的是，这能引起人们彻头彻尾的争议，因为他们根据自己喜爱的计量单位形成了不同阵营。事实上，每种方法都有其自己独特的优势和局限性。因此，接下来让我们来研究并讨论一下常用的几个方法，同时希望这篇文章能帮助大家更好的理解font-size的设置属性。

我们的老朋友，像素

在开始之前，让我们先来快速的看一个小演示。我从“an old,favorite book”中摘取了一段文字，并应用了一些基本的HTML5和轻量的CSS。如果你愿意，你可以查看我的小页面。

my little page

现在，眼尖的你可能已经注意到了标记的、温和的设计：

<article>
  <header>
    <h1 class="main-title">
      <img src="dorothy.png" alt="" />A Brief Excerpt from <cite>The Wonderful Wizard of&nbsp;Oz</cite>
    </h1>
    <h2 class="byline">by <a class="person" href="#">L. Frank Baum</a></h2>
  </header>

  <div class="article-body">
    <p><b class="caps">The Lion hesitated</b> no longer, but drank till…</p>
    …
  </div><!-- /end .article-body -->

  <footer>
    <p>Words by …</p>
  </footer>
</article>

 我们的页面基本上是一个大的article元素，它包含：

1. 一个包含标题(h1.main-title)和署名(标记的h2.byline)的header元素
2. 主要内容是放在一个类名为article-body的div标签中
3. 最后，就是一个包含一些版权归属信息的footer元素

没有什么特别的，对吧？看上去也十分的低调。由于这是一篇关于字体大小的文章，因此现在我们不需要太担心这个小巧的头部的布局。想法的，我们来看看字体吧：

body {
  font: normal 16px/24px adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

.main-title {
  font: normal 30px/36px abril-display, Palatino, Georgia, Times, serif;
}

.main-title cite {
  font-size: 42px;
  line-height: 50px;
}

.article-body {
  font-size: 18px;
}

.caps,
figure,
footer {
  font-size: 14px;
}

 从一开始，页面就严重依赖 Adoble Text Pro 文中对body的设置，通过 abril Display 字体可以让我们的 .main-title 标题变得好看。除了默认的css样式，其余的css特地指定了几个不同的字体大小：5个规则，5个不同的font-size值，单位都是px，基本上就是如此。

很简单，不是吗？我觉得这只是发挥了这个强大的像素一半的威力，毕竟它太容易使用了。在我们工作接近完成的时候，我们可以将一些像素值从Photoshop转变为css. 但是，在效率背后，为了满足设计师控制的欲望而声明几个简单的像素值，并没有什么吸引力。这也就是像素所有的优点了，它没有其他的吸引力。

事实上，像素有一个众所周知的缺点：IE浏览器的“文字大小”工具不会调整以像素为单位的文本。现在，许多的桌面浏览器，包括最新版本的IE浏览器，都包含了某种形式的页面缩放，它可以放大你的页面内容，包括文字。但是，一声叹息，旧版本的IE浏览器还不支持这个功能。

不过，探索过时的像素的替代品，也许会带来一些真正的实际的好处。你可曾创建过一个菜单，用户可以在页面上动态的修改文字大小？我曾经参与过几个，包括一个最近刚发布的。如果你的设计普遍是以像素为单位而设置的，那么每个文字大小层级要求你为基于像素设计的元素重新声明大小。在一些项目中，这是非常可能的，因为像素几乎没有扩展性。

现在，言归正传，让我们一起来看看这个颇具比例性的计量单位，即：em，它可以很好的对字体大小进行调整。

用em去联系上下文

我是一个有怀旧情怀的人，所以先让我们一起重温一下body的规则。下面是我们目前用到的样式：

body {
  font: normal 16px adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

 在我们进行比例化的设置前，我们轻微的改变一下body的样式。

body {
  font: normal 100% adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

 发现有什么不同了吗？我们将body的font-size值改成了100%，将文档基本的字体大小设置成为浏览器默认大小，这个值一般为16像素。这样做的话，我们就指定了一个灵活的基准，一个参考点，使得我们可以通过相对计量单位em去设置文章的大小。

值得一提的是有的人喜欢将body的font-size值设置为62.5%，这给了我们一个大约为10px的基准点，这样我们在计算相对字体大小的时候更加简便。《the original 62.5% technique》的作者，richard rutter, 写了一篇文章《a fantasitic article for A List Apart》推荐以100%作为基准点，这样可以确保各浏览器中的效果更加一致。

好吧，我跑题了。不管你喜欢使用哪种font-size值作为基准，眼前我们的工作是将基于像素的font-size值转换成相等的em值。要做到这点，我们需要做一些数学运算。我们可以简单得将已经设定的目标像素值，除以包含它的元素（换句话说，即上下文）的font-size值。我们直接将这个值运用em单位写入css中，就能直接得到我们期望的font-size值。

相对字体大小可以通过下面这个简单的公式计算得到：

目标值 / 上下文 = 结果

让我们来看一个简单的例子，还记得我们的主标题吗？

.main-title {
  font: normal 30px/36px abril-display, Palatino, Georgia, Times, serif;
}

为了将标题的30px的值转换成em值，我们需要定义跟它相关的上下文，也就是body的font-size的值。我们假设body的font-size设置为100%的时候对应的字体大小是16px。接下来，我们把 .main-title这个标题的目标值和它的上下文的font-size值放入公式中，即：

30 / 16 = 1.875

30px是16px的1.875倍，那么字体大小用em表示就是1.875em

现在你可能还记得，这本书的标题是包含在我们主标题的cite元素中，它的字体比主标题要大一点：

.main-title cite {
  font-size: 42px;
}

 如果我们要把42px转换成em值，有一点我们需要注意：它的上下文已经变化了。因为我们已经设定了.main-title 主标题的font-size值，那么该元素内部的元素的font-size值的计算就是根据该元素的font-size值来计算的。换句话说， cite元素的目标值42px不需要去除以body的font-size值16px，而是应该除以我们设定的主标题的font-size值，即30px.

40 / 30 =  1.4

就是这样。随着上下文的应用，我们将计算出的比例值写到 .main-title标题，以及cite标签中。

.main-title {
  font: normal 1.875em/36px abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
  line-height: 50px;
}

 (我很喜欢将目标值和上下文值写入css注释中，这样我们修改这些相对值会更加容易，特别是像1.875em这样的值，人们一下子看不出是如何得到的？)

设置文字的比例只需要简单的通过上下文来计算就好了。这个同样也适用于设定文档的Line-height。例如：

.main-title {
  font: normal 1.875em/36px abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
  line-height: 50px;
}

 两个line-height的样式都是用的像素作为单位，.main-title 是36px, cite是50px；这也意味着Line-height的值并不会随着它们的font-size的值的变化而变化。也许是因为它们憎恨自由吧。

不过，令人欣慰的是，我们可以快速的将基于像素的值转换成基于比例的值。但是这次，我们的上下文是font-size本身，我们的目标是基于像素的line-height，考虑到这一点，让我们再多做一点数学吧。

36 / 30 = 1.2

50 / 42 = 1.2

在这里，.main-title和cite这两个元素的line-height值都是1.2.由于这两个元素都共享同样的line-height，我们可以一次只设定一个line-height值在层级较高的元素上。这样，它的子孙元素就可以继承它的line-height值。

.main-title {
  font: normal 1.875em/1.2 abril-display, Palatino, Georgia, Times, serif;  /* 30 / 18; 36 / 30 */
}

.main-title cite {
  font-size: 1.4em;  /* 42 / 30 */
}

 更重要的是，我们实际上并不需要给Line-height添加单位。是的！有了上下文这个强力的工具，我们可以回到基于像素的样式规则。

.article-body {
  font-size: 18px;
}

.caps,
figure,
footer {
  font-size: 14px;
}

 像以前一样，我们可以通过一些简单的数学和给定的上下文，将这些值转换成灵活的em值。

.article-body {
  font-size: 1.125em;  /* 18 / 16 */
}

/* figure and .caps are children of .article-body, so their context is 18px */
figure,
.caps {
  font-size: 0.777777778em;  /* 14 / 18 */
}

/* The footer's context is the body element, so we'll use 16px here */
footer {
  font-size: 0.875em;  /* 14 / 16 */
}

 通过这些工作，我们可以成功的让我们的页面脱离像素的束缚。页面的设计与原来基于像素的版本相同，却更具的灵活性，比例化和可访问性。

认识rem

em的确是一种很强大的“巫术”，但它并不是没有缺点。很显然，它需要元素的上下文环境，使用起来比较的笨重。更重要的是，在设计中移动某些模块是很复杂的，因为他们的font-size也许同文档的层次结构的特定位置绑定了。因此，对于复杂的，内容较多的网站，这可能需要一些工作。

值得庆幸的是，已经有了一些方法可以改善我们的老朋友em。CSS3规范中，rem的行为跟em很相似。rem也是一个相对的度量单位，对文字的大小的设定从基线值向下或向上。但是rem的值的设定是跟文档的根元素相关的，也即是body元素的font-size值。

一旦我们使用了rem为单位，那么我们的CSS看上去会是这样子的：

body {
  font: normal 100%/1.5 adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

.main-title {
  font: normal 1.875rem abril-display, Palatino, Georgia, Times, serif;  /* 30 / 16 */
}

.main-title cite {
  font-size: 2.625rem;  /* 42 / 16 */
}

.article-body {
  font-size: 1.125rem;  /* 18 / 16 */
}

.caps,
figure,
footer {
  font-size: 0.875rem;  /* 14 / 16 */
}

 这仍然是相对字体大小，因此我们依旧使用 目标 / 上下文 的公式。但现在，整个CSS中，我们的context都是16px。没错，不用跟踪更多不同的上下文值，不用担心哪个元素继承了哪个元素的font-size值，当然也不会慢慢的变疯掉。对讨厌数学的人来说，这种一致性是令人兴奋的。

可悲的是，不是所有的浏览器都支持rem。 Firefox 3.6+, Chrome, Safari 5, and IE9 all support the rem.（IE9以上的浏览器甚至可以重新调整文字通过rem）。不幸的是，支持的广泛性，并不意味着它的普及。所以，如果你支持列表外的浏览器是一个显著的数量，那么你可能需要声明一个备用的像素：

body {
  font: normal 100% adobe-text-pro, Cambria, Georgia, "Times New Roman", Times, serif;
}

.main-title {
  font: normal 30px abril-display, Palatino, Georgia, Times, serif;
  font-size: 1.875rem;  /* 30 / 16 */
}

.main-title cite {
  font-size: 42px;
  font-size: 2.625rem;  /* 42 / 16 */
}

.article-body {
  font-size: 18px;
  font-size: 1.125rem;  /* 18 / 16 */
}

.caps,
figure,
footer {
  font-size: 14px;
  font-size: 0.875rem;  /* 14 / 16 */
}

 性感吧？也许不。但是这种混合方法可以使现代浏览器使用rem，同时在老的浏览器中使用备用的像素单位，这简直就是绝配。

px，em和rem，天哪！

不管你喜欢px还是em，或者开始涉足rem，每种方法都有其独特的缺点和优点，都为你工作的项目做出了自己的贡献。

像素能提供较高的精度，但是牺牲了通用性。虽然em能同时提供我们所希望的控制力和辅助功能，但是需要一定量的涉及上下文的数学开销。我期待更好的浏览器的支持，因为rem提供了一条前进的道路，但是从个人角度讲，那些基于px的备用样式并不喜欢这种适当的妥协处理。希望我们可以尽快的移除这些备用样式。

转载于:https://www.cnblogs.com/hutaoer/articles/3357120.html