「css基础」一次搞懂CSS 字体单位:px、em、rem 和 %

开篇

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

内容来源:https://www.oxxostudio.tw/articles/201809/css-font-size.html

作者:oxxostudio

注:由于网站是繁体内容,术语描述和话术与我们有差异的问题,笔者在保证不改变原意的基础上做了调整,文中的内容和例子笔者都做了确认与验证,如有问题,欢迎留言指正。

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>

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>

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>

%

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

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 的设定,因此使用上还是得稍微注意一下啰!

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SmartSi

Hexo Next主题添加版权信息

主题配置文件下,搜索关键字 post_copyright , 将 enable 改为 true:

27040
来自专栏我的前端路

20个很有帮助的 Web 前端开发教程

在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表。这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅。相信你...

12300
来自专栏前端技术地图

[译] 不容错过的CSS变量

当我第一次听说CSS变量时,我是抱着怀疑太多的。scss、sass、less和stylus这些CSS预处理器不是都有变量机制吗? 为什么还要使用它?过了几年,我...

7310
来自专栏趣谈前端

用Javascript和css3实现一个转盘小游戏

本文技术路线采用和上篇文章教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)同样的技术,即均使用本人自己写的dom库去简化dom操作,具体需要掌握的知识点有...

40120
来自专栏三言两语

Hexo的安装及重置恢复

Hexo博客已经使用挺长时间了,其出色的静态网页渲染能力深得我的喜欢,然鹅也是因为 Hexo 基本完全依赖渲染模板的原因,如果在整博客的过程中引入了错误的代码段...

38320
来自专栏企业平台构建

基于springboot+mybatisplus构建系统管理平台(二)

上一篇主要说到了spring security和mybatis-plus的使用,当然都是使用过程中的一些描述,可能在理解上与实际有一些出入,毕竟是学习的过程,循...

10920
来自专栏JAVA人生/面试技巧

JAVAWEB复习笔记-day02

6110
来自专栏前端技术地图

[技术地图]

在React 组件设计实践总结 03 - 样式的管理一文中吹了一波 styled-components 后,本文想深入来了解一下 styled-componen...

12220
来自专栏三言两语

前端快速入门之概述

以下是对(前端)可视化工作的并不系统的总结,新手向,主要是想说一下前端如何组成、功能如何实现、资源如何请求,进而说到数据如何显示,并在最后列举了一些十分重要的参...

8220
来自专栏前端技术地图

React组件设计实践总结03 - 样式的管理

CSS 是前端开发的重要组成部分,但是它并不完美,本文主要探讨 React 样式管理方面的一些解决方案,目的是实现样式的高度可定制化, 让大型项目的样式代码更容...

12020

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励