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”来实现代浏览器的效果。

CSS 天坑 I - 字体单位

时间: 2024-10-06 14:15:39

CSS 天坑 I - 字体单位的相关文章

CSS尺寸和字体单位-em、px还是%

在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置,则会增加页面的复杂性,增加用户对页面理解的复杂性:甚至在当下访问终端 (iPhone.iPad.PC.Android…)层出不穷的今天,适应各式各样的访问终端,将成为手中的一块“烫手的山芋”.所以在近几年,“九宫 格”式的“流式布局”再度回归.为了提供页面布局,及其它的可维护性.可扩展性,我们尝试

css字体单位

今天我们就来看一下css中的字体单位.或者你会说,不看不知道,一看吓一跳,原来css有那么多的字体单位啊,虽然有一些我们很少用,或者说没用过,但,,,它就在那里.一起去看一看吧. css中的字体单位主要分为两种类型:绝对长度单位和相对长度单位. 1.绝对长度单位:所谓绝对长度单位就是说它是一个固定值,它反映的是一个实实在在的物理尺寸,说多大就是多大,绝对长度单位不依赖于环境(显示器.分辨率.操作系统等.绝对长度单位分为以下几种: cm:厘米   mm:毫米 in:英寸(1in = 96px =7

css的字体单位

今天我们来讲一下css中最常用到的三种字体单位:px,em和rem.px是相对长度单位,它的大小是相对屏幕分辨率来说的,em和rem就不一样了,简而言之,就是它们的字体大小是由参照物来决定的.对于em,它的参照物呢,就是父级的字体,也就是说,它的大小始终是根据父级的字体大小来调整的,而rem是CSS3新增的一个相对单位,这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点于一

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

CSS -- 字体单位(px、em、rem)

web页面常用记量单位:px.em.rem: 任意浏览器的默认字体都是16px.所有未经调整的浏览器都符合: 16px = 1em = 1rem. ==>在一个CSS选择器被写入时,浏览器就有了一个“16px”大小的默认渲染字体.此时我们Web页面中的<body>就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置<body>的“font-size”值,来改变其继承的值. 1.px / em / rem 区别.优缺点 px:相对长度单位 -- 绝对值

css中字体单位

认识这些单位 em:相对长度单位.相对于父元素.是一个可伸缩的单位. px:像素.是一个固定大小的单元. pt:点.是固定大小,不可伸缩的. %:百分比.相对于父元素.可伸缩的单位. rem:相对于根目录的em. 关联 一般来说,任意浏览器默认字体高度都是16px,而 1em=100%=16px=12pt 当不存在父级元素时默认样式: .px{font-size: 16px;} .em{font-size: 1em;} .rem{font-size: 1rem;} .pt{font-size:

CSS属性之字体(Font)

CSS属性之字体(Font) font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]  复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变,其他关键字的值放到这两个值的前面,顺序可以随意打乱. 可以在字号值(font-siz

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

写一个Sublime Text 2插件(CSS文件里px单位替换成rem单位)

三年前我就知道了sublime text 不过那时候用DW还是很爽的样子,后来有天想为难自己了,于是用了两年的vim和五笔,最近又觉得这么好编辑器也可以试试,改变一下自己,用一下的,不过由于工作的原因,没有坚持下来,有时候顺手似乎比先进更重要一些. 最近工作都是做一些移动端的页面,而微信的长按出现二维码有个bug,在ios里缩放的页面长按是不会出现"识别二维码"的.所以需要转换一下,不要让页面缩放,要自适应,这个时候就用rem单位来做的会比较好一些,而我的同事之前开发了一个px to