搞懂CSS 字体单位 _CSS字体

文章插图

对于绘图和印刷而言，「单位」很相当重要的，然而在网页排版里，单位也是同样具有重要性，在css3 普及以来，更添加了一些方便好用的单位( px、em、rem.. .等)，这篇文章将整理这些常用的CSS 单位，希望能够帮助到你在工作上能使用的更加得心应手。
「网页」和「印刷」的单位目前我们接触的范围来说，若要把单位做区分，最简单可以分为「网页」和「印刷」两大类，通常对于CSS来说只会应用到网页的样??式，毕竟真正要做印刷，还是会倾向通过排版软体来进行设计。
【搞懂CSS 字体单位】网页( 单位 )

px：绝对单位，代表屏幕中每个「点」( pixel ) 。
em：相对单位，每个子元素通过「倍数」乘以父元素的px值。
rem：相对单位，每个元素通过「倍数」乘以根元素的px值。
%：相对单位，每个子元素通过「百分比」乘以父元素的px值。

网页( 属性名称 )

medium：预设值，等于16px ( h4预设值)
xx-small：medium的0.6倍( h6预设值)
x-small：medium的0.75倍
small：medium的0.8倍( h5预设值，W3C定义为0.89，实测约为0.8 )
large：medium的1.1倍( h3预设值，W3C定义为1.2，实测约为1.1 )
x-large：medium的1.5倍( h2预设值)
xx-large：medium的2倍( h1预设值)
smaller：约为父层的80%
larger：约为父层的120%

印刷（简单了解下）

pt：印刷机的每个「点」，定义为1 pt ＝ 1/72 in，如果在72 dpi的系统上1 px = 1 pt，但如果在96 dpi的系统上1 px = 0.75 pt ( 72 /96 = 0.75 ) 。
in：英寸，在96 dpi的系统上1 in = 96 px 。
cm：厘米，在96 dpi的系统上1 cm = 37.795275593333 px 。
mm：毫米，在96 dpi的系统上1 mm = 3.7795275593333 px 。

示例展示以下将展示四种不同单位的示例，为了直观简单，四个示例都套用预设的div格式，纯粹改变font-size看看有何不同，由于子元素若没有设定font-size，会自动继承父元素的font-size，使用上就应该要预先初始化字体大小，下面这两段CSS可以将所有的元素字体大小预设为16px，接下来可以进行个别调整。
html{ font-size:16px;}html * { font-size: 1rem;}1、px
px 是绝对单位，因此只要设定多少px，就会精确的呈现，对于一些讲求精准位置的排版而言十分有用，如示例展示的，指定多大 px 字体就会多大。
<div style="font-size:16px;">16px <div style="font-size:20px;">20px <div style="font-size:24px;">24px <div style="font-size:16px;">16px <div style="font-size:32px;">32px</div> </div> </div> </div></div>

文章插图

2、em
em是相对单位，为每个子元素通过「倍数」乘以父元素的px值，如果我们每一层div都使用1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px 。(浏览器预设字体大小为16px，若无特别指定则会直接继承父元素字体大小)
<div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em</div> </div> </div> </div></div>

文章插图

3、rem
rem是相对单位，为每个元素通过「倍数」乘以根元素的px值，如果我们每一层div都使用1.2rem，最内层就会是16px x 1.2 = 19.2px 。(根元素指的是html的font-size，预设为16px ) 。
<div style="font-size:1.2rem;">1.2rem <div style="font-size:1.2rem;">1.2rem <div style="font-size:1.2rem;">1.2rem <div style="font-size:1.2rem;">1.2rem <div style="font-size:1.2rem;">1.2rem</div> </div> </div> </div></div>

文章插图

4、%
%百分比是相对单位，和em大同小异，简单来说em就是百分比除以一百，如果我们每一层div都使用120%，就等同于1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px 。
<div style="font-size:120%;">120% <div style="font-size:120%;">120% <div style="font-size:120%;">120% <div style="font-size:120%;">120% <div style="font-size:120%;">120%</div> </div> </div> </div></div>