CSS 天坑 I - 字体单位

首先，本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD）时显现的，如果你还只是在做传统的Web设计这算不上是一个坑，因为传统的Web页面是死的，不会自动调节不能适应各类设备屏幕尺寸自然不会产生任何尺寸变化的问题。相反地，要为不同设备上的用户提供最好的阅读或使用体验我们不可避免的就是对元素或字体的尺寸的测量与控制。由其是字体的尺寸，不知道你是否有以下的经历

同样的一个网页，同一份样式表，但：

• 字体在mac 上很漂亮，但在windows很难看 ？
• 文字在PC上位置正确，但在iPad上却错了位 ？
• 文字块在Chrome上长度适合，但换了FireFox却变长了，甚至换了行 ？

 

如果不幸地被言中，那么真得好好检查一下样式表的字体尺寸单位与行高所使用的单位是否正确了。在CSS3中我们可以应用很多的字体单位，如： pt, px, em, rem 和百分比（这里只讨论字体单位，对于vw / vh这类元素长度单位不在此讨论范畴），这些单位的具体含义是什么，在什么场合使用，选择哪个单位在RWD中最为适合呢 ？那么就先来一个一个地去了解它们的意义与用法再对具体应用作出选择。

 

点阵单位（pt）

　　PT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。

可见如果将pt作为Web上的首选字体单位那就是一个大坑！pt只适用于打印与普通文档文字排版并不适用于Web. 

像素单位 （px）

根据显示器的分辨率来确定长度，在老式web应用中多采用该单位；像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 

两种关系：一英寸=72pt(点)=96px(像素)，网页中最常用到的：9pt=12px

px本身是一个极大的坑，也是最多人愿意跳进去的。相对于同一分辨率的屏幕它是一个具体准确的测量单位，我们用做矢量图也最喜欢使用这个单位（px值是绝对值）， 所有的浏览器也是默认使用px来作为尺寸的测量单位，因此在网页设计时都会将px作为标准的尺寸单位使用。当没有互动移连网时代，没有RWD之前这是一个正确的选择，但时代变了px并不能适用于可变字体尺寸的场景，使用它会产生排版的变形。

 

像素单位会因屏幕分辨率变化而变型，不适于用作在各种设备上显示的网页的首选尺寸单位。

 

相对长度单位 （em） 

　　em 是一个相对于父节点尺寸的相对长度单位，可以理解为字体尺寸的百分比单位，但与百分比不同的是 em是有默认常量值的，当不明确指定父节点字体尺寸时，任意浏览器的默认字体高（line-height）都是16px。所以未经调整的浏览器都符合: 1em=16px ， 那么12px=0.75em, 10px=0.625em。这是一个极为常用的换算公式。 em 是最适用于RWD的一种标准字体尺寸，支持字体放缩，可根据屏幕分辨率以及不同浏览器间的显示差异作出微调，确保字体在不同的设备上，保持视觉与设计的一至性。值得注意的是，既然是相对单位就必定有参照物（元素），如果参照物不存在侧采用16px作为真实尺寸。以此理论我们就可以为我们的站点的样式表的最开始部分加上以下的代码：

 

html { font-size: 100%; // 通常默认值为 16px }
body { font-size: 0.75em; // 12px }
h1 { font-size: 2em; // 24px }

 

如果我们想将1em=16px这个默认规则改变的话，如将1em=12px可以写成这样：

 

html { font-size: 75%; // 12px }
body { font-size: 1em; // 12px }
h1 { font-size: 2em; // 24px }

 

如果我们希望在桌面显示的字体更为精细，而在移动设备上显示的字体可更为清晰的话也可以这样来写：

html { font-size: 75%; // 12px }
@media only screen and (max-device-width: 480px) {
    html { font-size: 100%; // 16px }
}

 

以上是举出最简单的例子以帮助我们理解em的用法，而在实际应用中则需要解决另一方面的问题：默认元素样式。各种浏览器对不同的标准元素有不同的默认样式，由其是字体。如果要保持字体的一至性就需要在样式表中明确地重写这些样式以保证浏览器间的兼容性。如：li 的字体会按照ul的字体尺寸计算相对的大小：

 

html { font-size: 75%; // 12px }
body { font-size: 1em; // 12px }
li { font-size: 0.833em; // 10px }

 

当然button, h1~h6, summary, detail等还有很多的元素都需要进行这个标准化的过程，如果觉得这个工作很麻烦也可以去下载著名的 normalize.css 样式表完成这个重置工作，虽然看起来很麻烦，但是这却可以避免在整个项目设计的过程中掉入这些由于尺寸所带来的不必要而耗时的调整。

 

 

相对根节点长度单位 （rem）

CSS3引入新的字体尺寸单位 rem ，可以简单记忆为root rm。

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点（或者是html节点），意思就是说你可以在html节点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置

 

我们来看一个简单的代码实例：

html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} 
body { font-size: 1.4rem;/*1.4 × 10px = 14px */} 
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

 

如果你习惯了使用px作为测量单位而又希望可以使用到rem 这种相对单位的话 , 那么我们可以做一个简单的mixin：

@base-font: 12px;
@mixin font-size(@font-size){
    font-size: @font-size;
    font-size: (@font-size/@base-font-size)*1rem;
}
li { font-size(10px); }

 

 

关于兼容性的考虑

　　rem 是CSS3新引进来的一个度量单位，大家心里肯定会担心浏览器的支持情况。其实支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8不支持。不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用”px”来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。