首页 > 代码库 > CSS 天坑 I - 字体单位
CSS 天坑 I - 字体单位
首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不会自动调节不能适应各类设备屏幕尺寸自然不会产生任何尺寸变化的问题。相反地,要为不同设备上的用户提供最好的阅读或使用体验我们不可避免的就是对元素或字体的尺寸的测量与控制。由其是字体的尺寸,不知道你是否有以下的经历
- 字体在mac 上很漂亮,但在windows很难看 ?
- 文字在PC上位置正确,但在iPad上却错了位 ?
- 文字块在Chrome上长度适合,但换了FireFox却变长了,甚至换了行 ?
点阵单位(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
像素单位会因屏幕分辨率变化而变型,不适于用作在各种设备上显示的网页的首选尺寸单位。
相对长度单位 (em)
html { font-size: 100%; // 通常默认值为 16px }body { font-size: 0.75em; // 12px }h1 { font-size: 2em; // 24px }
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 }}
html { font-size: 75%; // 12px }body { font-size: 1em; // 12px }li { font-size: 0.833em; // 10px }
相对根节点长度单位 (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); }