html字体大小单位一次搞懂CSS 字体单元pxemrem 和

对付绘图和印刷而言，「单位」很相称主要的，然而在网页排版里，单位也是同样具有主要性，在CSS3 遍及以来，更添加了一些方便好用的单位( px、em、rem.. .等)，这篇文章将整理这些常用的CSS 单位，希望能够帮助到你在事情上能利用的更加得心应手。

「网页」和「印刷」的单位

目前我们打仗的范围来说，若要把单位做区分，最大略可以分为「网页」和「印刷」两大类，常日对付CSS来说只会运用到网页的样式，毕竟真正要做印刷，还是会方向通过排版软体来进行设计。

网页( 单位 )

html字体大小单位一次搞懂CSS 字体单元pxemrem 和 Vue.js

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 字体就会多大。

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，若无特殊指定则会直接继续父元素字体大小)

3、rem

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

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。

5、small、medium、large...等

字体大小的属性有七种，分别是xx-small、x-small、small、medium、large、x-large和xx-large，除了x-small，别的六种分别对应h6~h1的标签笔墨大小，根据W3C的规范，以medium预设16px为根本(若html字体预设大小改变，medium也会随着变)，利用固定的百分比乘以medium的大小，例如xx-small预设为16px x 0.6 = 9.6px(浏览器显示为12px )。

<div style=\"大众font-size:xx-small;\"大众>xx-small <div style=\"大众font-size:x-small;\公众>x-small <div style=\公众font-size:small;\公众>small <div style=\"大众font-size:medium;\"大众>medium <div style=\"大众font-size:large;\"大众>large <div style=\公众font-size:x-large;\"大众>x-large <div style=\公众font-size:xx-large;\公众>xx-large</div> </div> </div> </div> </div> </div></div>

6、larger、smaller

larger 和smaller 便是固定百分比为单位，larger 为父层的120%，smaller 为父层的80%。

<div style=\"大众font-size:medium;\"大众>medium <div style=\"大众font-size:larger;\"大众>larger <div style=\"大众font-size:larger;\"大众>larger <div style=\"大众font-size:larger;\公众>larger <div style=\公众font-size:smaller;\"大众>smaller <div style=\"大众font-size:smaller;\公众>smaller <div style=\"大众font-size:smaller;\"大众>smaller</div> </div> </div> </div> </div> </div></div>

小结

熟习了字体大小单位之后，你就更够能有系统的进行设计全体网站的CSS字体架构，不过font-size 本身和font-family 有着一些繁芜的关系，不同的font-family 有时也会影响font-size 的设定，因此利用上还是得轻微把稳一下啰！