常用的CSS 字体单位:px、em、rem 和 % 看这篇就够了

目录
文章目录隐藏
  1. 01 「网页」和「印刷」的单位
  2. 02 示例展示
  3. 结束语

常用的 CSS 字体单位:px、em、rem 和 % 看这篇就够了
对于绘图和印刷而言,「单位」相当重要的,然而在网页排版里,单位也是同样具有重要性,在 CSS3 普及以来,更添加了一些方便好用的单位( em、rem.. .等),这篇文章将整理这些常用的 CSS 单位,希望能够帮助到你在工作上能使用的更加得心应手。

相关文章推荐:

css 单位和值
视口百分比长度 vh、vw、vi、vb、vmin、vmax 单位的了解

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

目前我们接触的范围来说,若要把单位做区分,最简单可以分为「网页」和「印刷」两大类,通常对于 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。

02 示例展示

以下将展示四种不同单位的示例,为了直观简单,四个示例都套用预设的 div 格式,纯粹改变 font-size 看看有何不同,由于子元素若没有设定 font-size,会自动继承父元素的 font-size,使用上就应该要预先初始化字体大小,下面这两段 CSS 可以将所有的元素字体大小预设为 16px,接下来可以进行个别调整。

html{
    font-size:16px;
}
html * {
    font-size: 1rem;
}

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>

像素 px

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>

em 是相对单位

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>

rem 是相对单位

%

%百分比是相对单位,和 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>

百分比单位

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>

常用的 CSS 字体单位:px、em、rem 和 % 看这篇就够了

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 字体单位:px、em、rem 和 % 看这篇就够了

结束语

以上就是今天关于 css 单位的全部内容总结,熟悉了字体大小单位之后,你就更够能系统的进行设计整个网站的 CSS 字体架构,不过 font-size 本身和 font-family 有着一些复杂的关系,不同的 font-family 有时也会影响 font-size 的设定,因此使用上还是得稍微注意一下啰!

「点点赞赏,手留余香」

9

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 常用的CSS 字体单位:px、em、rem 和 % 看这篇就够了

发表回复