/ em

Web设计中的字号设置

在Web设计中,“如何设定页面文字大小”是一个很基础又充满争议的问题。本文首先介绍用于字体大小的常用单位,然后介绍最传统、最常用的单位px的优缺点,最后提出提出灵活设置文字大小的方法,改进以px为单位的设计的不足。

1. CSS中font-size属性可用的值

1.1 长度单位

相对长度单位:
  • em:相对于父元素的大小
  • ex:相对于特定字体中小写字母x的高度
  • px:相对于特定设备的分辨率,最常用的单位
  • rem:根据根元素的基准值计算出的值
绝对长度单位多用在打印时,或者用在浏览器/设备的物理尺寸和属性已知的情况:
  • in:英寸
  • cm:厘米
  • mm:毫米
  • pt:点,确切的说法是一个专用的印刷单位磅,大小为1/72英寸
  • pc:12点活字

1.2 关键字表示

“相对大小”的关键字:
  • larger
  • smaller
这些值和父元素的设定有关,W3C的说明是:如果父元素字体设定为medium,那么关键字larger会将当前元素的字体大小增大为large。

“绝对大小”的关键字,关键字所对应大小由用户代理(浏览器/屏幕阅读器等)设定:

  •  [ xx-small | x-small | small | medium | large | x-large | xx-large ]
CCS 1中,W3C建议将相邻关键字的比例设为1.5,实际体验证明这个比例太大;CSS 2中建议比例调整为1.2,带来的问题是较小的字号区别不明显。CSS 2.1开始W3C不再提供比例建议。

2. 传统的字号设置方法

查看国内绝大多数网站的CSS文件,都会发现下面的代码:
body {font-size:12px;}
通过body元素为页面上的文字设定一个基准大小,12px是最常见的值。使用px的好处是可以精确控制字体大小,在不同用户代理间保持一致。

缺点是会影响视力较差用户的使用体验。IE限制用户改变以像素为单位的文字大小(IE9中依然如此),而其他浏览器允许用户设定的值覆盖以像素为单位的字体大小。从IE7开始,微软引入了页面缩放功能,允许用户将页面整体放大或缩小,而不只是调整文字大小。这个功能对视力较差的用户是有益的,但是页面整体放大很容易超出浏览器视口,产生水平滚动条,影响使用体验。允许用户自由改变text-size无疑是最好的选择。

 3. 改进字号设置

3.1 关键字结合百分比

前面提到表示字体绝对大小的关键字有[ xx-small | x-small | small | medium | large | x-large | xx-large ],大多数浏览器默认将medium设置为16px左右,按1.5的比例来计算,small关键字的大小接近12px。

首先,为body元素设置基准值。

body {font-size:small;}

然后对于其他元素,使用百分比来增大或减小字号。

h1 {font-size:150%;}
.note {font-size:90%;}

基准值+百分比值法的优点是:无论维护着还是使用者,当想改变默认的页面字体大小时,只需要修改body的基准值,其他元素都会相应按比例发生变化。缺点是不同用户代理间会有细微差别;百分比嵌套过多后,计算会变得复杂,应尽量控制层级、慎用嵌套。

3.2 使用em实现更灵活的字号设置

em是一个相对的度量单位,1em等于一个字型尺寸。在6针字型中,em就是6个点的长度;在12针字形中,em就是12个点的长度。在任何尺寸下em都是等比例的。
大多数浏览器的默认字体大小为medium,也就是16px。我们来看How to size text using ems中的方法。

首先,将body元素的基准字体大小设置为62.5%。

body { font-size:62.5%; }

为什么是62.5%?16x62.5%=10,也就是将页面的基准字号设置为10px,方便计算,如正文字号设置为1.2em就是12px。

对于嵌套元素的字号,可以通过下面的公式计算:

子元素字号em = 子元素像素字号 / 父元素像素字号

和百分比法一样,使用em也应当注意嵌套的层级。

3.3 CSS 3中的rem

使用em时多层嵌套元素计算很麻烦,为解决这个问题,CSS 3引入了rem(root em)。em的值依赖于父元素的字体大小,使用rem则不必考虑上下文和嵌套。使用rem时,不管元素位于文档的什么位置,其大小总是相对于根元素基准字体大小设定的。
body {font-size:62.5%;} /*设定基准字号*/
h1 {font-size:18rem; /*18px*/}
p {font-size:1.2rem; /*12px*/}
rem虽然是CSS 3引入的单位,但现代浏览器都已经支持:Safari 5、Chrome、Firefox 3.6+、Opera 12+、Internet Explorer 9+。对于不支持的rem的浏览器,Font sizing with rem中也给了解决方案:对不支持rem的浏览器使用px。当然,使用px又回到原点,具体可以根据用户群体及项目实际做权衡。
html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

总结

国外很多网站早已经开始使用基于em的字号设置及布局设置,相信使用rem的也越来越多,而国内基本还停留在使用px上。国内这样的现状,个人认为主要是对用户体验不够重视,有主观能也有客观的原因,具体而言:
  • 用户代理(浏览器使用):很多用户还在使用IE9以前的浏览器;
  • 开发者:理念落后,习惯使然,或者是知识更新滞后,px根植于心;
  • 历史预留:很多门户网站还未来得及彻底重构;
  • 项目管理者:基于各种考量,项目管理者可能会扼杀开发者使用新技术的想法;
  • 其他:如相关立法空白等。
随着移动开发和响应式设计的风靡,相信越来越多的国内一开发者会尝试使用em、rem这样的相对单位,也希望国内的互联网巨头们能鼓励员工创新、更多使用新技术,促进Web标准在国内的发展。