[译]响应式web设计之字体响应式

原文标题:Responsive Web Design: Using Fonts Responsively

原文作者:Annarita Tranfici 2013-01-18

这是理解响应网页设计系列6篇教程的第一篇

排版是响应式Web设计最重要的内容之一,如果你想内容能在所有尺寸屏幕上友好地显示,那就绝对必要地为移动设备优化字体。幸运的是,实现弹性字体的过程并不是那么困难。当我谈论弹性(在这种情况下,是一种指导原则),我们不能忽视指定字体来适应我们响应式网站。我们可能使用不同的单位标准来实现这个目标,包括pixel(像素),em,rem或者是百分比。那么选择一个正确的标准对设计一个可塑的,响应式的交互界面是至关重要的。

在这关于响应式Web设计的系列中,我将讲解如何响应式地管理动态字体,也会逐个分析上面所提到的每个单位标准,对比各自的优缺点。

Pixel(像素)

很早之前,Pixel(像素)就是被用作web设计的单位,原因就是它本身固有的精密度和准确度。一旦字体赋具体的值,就能在所有设备以及浏览器中保持相同的大小。虽然这种方法提供了非常精确的大小控制,但它却与我们需要的弹性和响应式相违背的。

可能很多读者都已知道,当你给一个“父”元素设置尺寸时,通过继承特性就会把尺寸“传递”给“子”元素。(这就是为什么把CSS命名为“层叠”样式表)例如,设置一个固定的像素值给bodyfont-size,然后就会把这个值“传递”给你设计的所有其他元素。这时候,开发人员如果想单独地分配样式,那就必须手动地设置不同的参数去覆盖已存在的样式。

因此,基本编辑以及调整将需要小心翼翼地对所有预设样式进行修改。这会引发的不只是不方便的问题,还会在各种浏览器和设备上出现显示不友好的问题,其中很多是由于选择字体大小而造成的。很多读者是在特定字体大小的情况会出现阅读障碍的而这些都是要被防止出现的,尤其是考虑到我们响应式设计的目标是在所有的屏幕尺寸和视野下很好的显示。

如果你为设计采用前卫的方法思想,那么精确的像素单位并不算是最好的选择。今天,设备有各种各样的屏幕尺寸,也就是说不同的像素宽高的屏幕。使用一个特定大小的字体来适应所有的屏幕,那是跟我们的响应式设计相违背的。

Em

我们接下来讲em,一个em也是一个大小的单位,可以定义font-size的值大小。举个例子,如果我们创建一个div包含font-size值为16px的文本,那么1em就代表16px,2em就等于32px,依此类推。em在所有浏览器中是可变化的,不需要去为每一个元素设置值,因为CSS具有继承特性,也就是“层叠”。

很明显,使用ems需要考虑优缺点。尽管,使得维护网站的成本降低,但会阻碍开发人员正在寻求控制、精度和可预测性的字体大小。幸运的是,这个问题可以很容易地被解决,通过为大部分内容使用相同的计算单位,需要添加一些简单的文本元素,如headerfooter

百分比

类似em单位,百分比也是可变化的,可被继承的。理论上,两者是没有很大的区别,都是计算单位。实际上,需要理解两者的区别是自己打算选择使用哪种计算单位在你的设计上。你当然不想在指定的元素使用em,而在其他元素使用百分比。如下CSS声明:

{ font-size:100%; }

这样可以覆盖掉浏览器默认定义或者其他不想要的百分比声明,在这里,可以使用em单位的。

Rem

可能有些读者还不知道我们还有另外一个选择提供弹性字体大小的单位:rem(root(根) Em)。这个rem跟em很相似,不同的是,rem只定义“父”元素的尺寸。这个重要的不同点可以解决很多出现内嵌套的元素问题。大多数设计师都知道,绝大多数的设计本质上是包含嵌套的元素;好比人类,每一人都会有自己的父母,然后继承父母的特性。

然而,现在需要意识到的是rem是一个很新的单位,因此不是所有的桌面浏览器都支持,解释或者很好地显示它们,至少目前是这种情况的。

结论

我们已经学习这几种字体的计算单位,究竟哪一种更加适合响应式Web设计呢?

确定的是,em使得字体更加容易缩放和维护。如果你打算,例如,使用百分比来增加字体大小,你将可能去改变应用于body的百分比,而不用做其他操作。维护是一个很大的问题,是值得你在设计中多多考虑到的。你可能忽视日常方面易于维护和简单的样式表,转而将注意力集中在美学和功能,但是一个好的设计师会很重要地考虑维护性和重视实用性。

首先,你必须把所有固定的大小元素转换成别的东西确保有更高的流动性。然后,你应该记住页面元素的比例和小心地修改,并且保持这些元素比例。我将在接下来的文章中,用一些示例来说明实现响应式Web设计原则。现在最重要的是能够理解这个基础的技术方法。在下一篇文章中,我们将讲解“流”布局以及如何能够在同一页面结合固定宽度和流体宽度。

Spy 16 February 2014