今天我们就来看一下css中的字体单位。或者你会说,不看不知道,一看吓一跳,原来css有那么多的字体单位啊,虽然有一些我们很少用,或者说没用过,但,,,它就在那里。一起去看一看吧。
css中的字体单位主要分为两种类型:绝对长度单位和相对长度单位。
1.绝对长度单位:所谓绝对长度单位就是说它是一个固定值,它反映的是一个实实在在的物理尺寸,说多大就是多大,绝对长度单位不依赖于环境(显示器、分辨率、操作系统等。绝对长度单位分为以下几种:
cm:厘米
mm:毫米
in:英寸(1in = 96px =72pt= 2.54cm)
px:pixel 像素 (1px =1/96in)
pt: point 大约1/72英寸(1pt = 1/72pt)
pc: pica 大约6pt,也就是1/12英寸
px,表示pixel,称为像素,像素的大小随用户显示器的大小和像素深度而变。一个像素等于屏幕上一个点的高度/宽度,是屏幕上显示的最小单位。这个度量单位最适合显示器,BUT! pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力。
pt,表示point,来源于打印设计,是印刷行业常用单位,叫“磅”,等于1/72英寸。pt是一个标准的长度单位,最适合于印刷,但也常用于用户显示器。
在Windows系统中,px和pt的使用区别,只有当用户改变默认的96DPI下才会产生。使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。附公式:px = pt * DPI / 72。那么什么是DPI呢?显示器的DPI(PPI)表示dot(pixel) per inch,即每英寸的点(像素)数,表示“清晰度”,“精度”,默认情况下为96DPI,但是我们是可以对此进行更改的,在桌面上点击右键,弹出快捷菜单>属性>setting>Advanced>General>DPI setting>96 DPI
在浏览网页过程中,所有的“大”“小”概念,都是基于“屏幕”这个“显示界面”上。“屏幕”上的各种信息,包括文字、图片、表格等等,都会随屏幕的分辨率变化而变化。在不同分辨率下,无论是px还是pt,屏幕上的各种信息都会改变大小。所以,基于这种现实情况,如果想要让某个字体,在所有用户面前呈现的效果是一样的,几乎是不可能的,
2.相对长度单位:当我们利用相对长度单位定义字体的大小时,字体的大小不是绝对的,而是相对于某一个参照而言的。相比于绝对长度单位,相对长度单位也更适用于不同的显示器。相对长度单位包括我们最常见的em和rem。除此之外,相对长度单位还有vh ,vw,vmax,vmin,ex,ch,百分比。
1??em 在我们设置字体的时候,它的大小是以父级为参照的,下面我们来用一个例子来进行说明:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .div1{ font-size:20px; } .div2{ margin-top:20px; font-size:1.5em; } </style> <body> <div class="div1"> <span id="">我是父级元素</span> <div class="div2"><span>我是子集元素</span></div> </div> </body> </html>
运行结果如下:
说明:第一行文字大小为20px,第二行文字现在的字体大小现在显示的是30px,我们刚才说过em是相对于父级,那么此时,1.5em = 1.5*20 = 30px;
2??rem 作为css3新增的相对单位rem引起业界的广泛关注。虽然它与em一样都是对长度单位,但是,它却比em更好用。为什么这么说呢?rem在我们设置字体大小的时候,它的参照物是相对于HTML根元素的,也许你会说,这有什么了不起,不就是参照物不一样么,它还是相对长度单位。虽然em是靠爹的,但没有办法,rem确实是比它更方便。这话不是没有依据的,em相对父级,可是当我们比较多的一层一层去嵌套的时候,真的是着实让人头疼。但是rem就不一样了,它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应
下面我们举一个简单的例子来说一下rem的具体用法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> html{ font-size:20px; } .div1{ font-size:1rem; } .div2{ margin-top:20px; font-size:2rem; } </style> <body> <div class="div1"> <span id="">我是父级元素</span> <div class="div2"><span>我是子集元素</span></div> </div> </body> </html>
运行结果:
解释一下,为什么设置为20px,首先10的倍数容易计算,那为什么不是10本身而是20?现在Chrome最小的字体是12px,所以10px是无效的,改变一下HTML的大小,真的可以成比例改变所有字体的大小哦,有木有很方便,默认情况下,html根元素字体大小一般为16px噢。
3??vh :viewpoint height,翻译成汉语是视窗高度,1vh=视窗高度的1% 。当你以vh为单位时,字体的大小是会随着你屏幕窗口的高度而变化的。
4??vw :viewpoint width,翻译成汉语是视窗宽度,1vw=视窗高度的1% 。当你以vw为单位时,字体的大小是会随着你屏幕窗口的高宽度而变化的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> h1{ font-size:10vw; } </style> <body> <h1>vh为单位设置字体大小</h1> </body> </html>
现在我是这么大:
现在我是这么大,
5??vmax 当字体单位设置为vmax时,表示此时的字体大小为当前页面显示时,vh和vw中较大的一个,同理,vmin表示此时的字体大小为当前页面显示时,vh和vw中较小的一个
6??ex 它的大小依赖于当前英文字母小x的高度,这个单位我们很少会用到。
7??ch 数字0的宽度 下面我们来看一个例子,就知道究竟是怎么回事了
运行结果如下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <style> h1{ margin:10px 0; font-size:16px; } div{ overflow:hidden; width:10ch; background:#ccc; } </style> </head> <body> <h1>定义一个宽度正好能装下10个0的容器:</h1> <div>0000000000</div> </body> </html>
8??.百分比。属性值中使用百分比设置大小,将在容器对象文字大小的基础上进行改变。如果我们设置body的文字大小为10。我们设置p的文字大小为150%,则p的文字大小就为15。不管10是什么样的单位,百分比作为一种比例进行缩放调整。下面我们以px为例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <style> body{ font-size:20px; } div{ font-size:150%; } </style> </head> <body> <div>以百分比设置</div> </body> </html>
css中字体的单位如此之多,但具体的用哪种方法还是要取决于具体情况。