本文由Spy根据Annarita Tranfici的系列教程《Understanding Responsive Web Design》之一《Responsive Web Design: Using Fonts Responsively》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/。
——作者：Annarita Tranfici——译者：Spy
排版是响应式Web设计最重要的内容之一，如果你想内容能在所有尺寸屏幕上友好地显示，那就绝对有必要地为移动设备优化字体。幸运的是，实现弹性字体的过程并不是那么困难。当我讨论弹性（在这种情况下，是一种指导原则），我们不能忽视指定字体来适应我们响应式网站。我们可能使用不用单位标准来实现这个目标，包括pixel(像素)，em，rem或者是百分比。那么选择一个正确的标准对设计一个可塑的，响应式的交互界面是至关重要的。
在这关于响应式Web设计的系列中，我将讲解如何响应式地管理动态字体，也会逐个分析上面所提到的每个单位标准，对比各自的优缺点。
Pixel(像素)
很早之前，Pixel（像素）就是被用作web设计的单位，原因就是它本身固有的精密度和准确度。一旦字体赋具体的值，就能在所有设备以及浏览器中保持相同的大小。虽然这种方法提供了非常精确的大小控制，但它却与我们需要的弹性和响应式相违背的。
可能很多读者都已知道，当你给一个“父”元素设置尺寸时，通过继承特性就会把尺寸“传递”给“子”元素。(这就是为什么把CSS命名为“层叠”样式表)例如，设置一个固定的像素值给body的font-size，然后就会把这个值“传递”给你设计的所有其他元素。这时候，开发人员如果想单独地分配样式，那就必须手动地设置不同的参数去覆盖已存在的样式。
因此，基本编辑以及调整将需要小心翼翼地对所有预设样式进行修改。这会引发的不只是不方便的问题，还会在各种浏览器和设备上出现显示不友好的问题，其中很多是由于选择字体大小而造成的。很多读者是在特定字体大小的情况会出现阅读障碍的,而这些都是要被防止出现的，尤其是考虑到我们响应式设计的目标是在所有的屏幕尺寸和视窗下很好的显示。
如果你为设计采用前卫的方法思想，那么精确的像素单位并不算是最好的选择。今天，设备有各种各样的屏幕尺寸，也就是说不同的像素宽高的屏幕。使用一个特定大小的字体来适应所有的屏幕，那是跟我们的响应式设计相违背的。
Em
我们接下来讲em，一个em也是一个大小的单位，可以定义font-size的值大小。举个例子，如果我们创建一个div包含font-size值为16px的文本，那么1em就代表16px，2em就等于32px，依此类推。em在所有浏览器中是可变化的，不需要去为每一个元素设置值，因为CSS具有继承特性，也就是“层叠”。
em和px之间的转换是一件非常复杂而又麻烦的事情。如果你以前从未接触过他们是如何进行转换的，个人建议你花点时间阅读早前写的博文《CSS中强大的EM》和《Sass基础——PX to EM Mixin和@function》。当然你也可以通过Em Calculator在线转换工具，进行实战体验。——@大漠
很明显，使用em需要考虑优缺点。尽管，使得维护网站的成本降低，但会阻碍开发人员正在寻求控制、精度和可预测性的字体大小。幸运的是，这个问题可以很容易地被解决，通过为大部分内容使用相同的计算单位，需要添加一些简单的文本元素，如header和footer。
百分比
类似em单位，百分比也是可变化的，可被继承的。理论上，两者是没有很大的区别，都是计算单位。实际上，需要理解两者的区别是自己打算选择使用哪种计算单位在你的设计上。你当然不想在指定的元素使用em，而在其他元素使用百分比。如下CSS声明：
{ font-size:100%; }
这样可以覆盖掉浏览器默认定义或者其他不想要的百分比声明，在这里，可以使用em单位的。
Rem
可能有些读者还不知道我们还有另外一个选择提供弹性字体大小的单位：rem（root(根) Em）。这个rem跟em很相似，不同的是，rem只定义“父”元素的尺寸。这个重要的不同点可以解决很多出现内嵌套的元素问题。大多数设计师都知道,绝大多数的设计本质上是包含嵌套的元素；好比人类，每一人都会有自己的父母，然后继承父母的特性。
然而，现在需要意识到的是rem是一个很新的单位，因此不是所有的桌面浏览器都支持，解释或者很好地显示它们，至少目前是这种情况的。
如果您从未接触过
rem相关的内容，建议先阅读《CSS3的REM设置字体大小》。同时rem与px之间也可以相互转换，详细的介绍请点击《Sass函数功能——rem转px》和《Sass基础——Rem与Px的转换》。——@大漠
结论
我们已经学习这几种字体的计算单位，究竟哪一种更加适合响应式Web设计呢？
确定的是，em使得字体更加容易缩放和维护。如果你打算，例如，使用百分比来增加字体大小，你将可能去改变应用于body的百分比，而不用做其他操作。维护是一个很大的问题，是值得你在设计中多多考虑到的。你可能忽视日常方面易于维护和简单的样式表,转而将注意力集中在美学和功能，但是一个好的设计师会很重要地考虑维护性和重视实用性。
首先，你必须把所有固定的大小元素转换成别的东西确保有更高的流动性。然后，你应该记住页面元素的比例和小心地修改，并且保持这些元素比例。我将在接下来的文章中，用一些示例来说明实现响应式Web设计原则。现在最重要的是能够理解这个基础的技术方法。在下一篇文章中，我们将讲解“流”布局以及如何能够在同一页面结合固定宽度和流体宽度。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
关于Spy
原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微博。
如需转载，烦请注明出处：
英文原文：http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/
中文译文：http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-fonts.html