论CSS中可使用的font-size的长度单位
本文由Tom Hodgins审阅。感谢SitePointer的编审们,帮助SitePoint提供最优质的内容给读者!
CSS给开发者提供了许多种长度单位,用于各种不同的CSS属性,如 margin
, padding
, line-height
还有 font-size
。为了满足不同的需求,我们有了各种各样的长度单位。即使你可以给某一CSS属性赋予相同的值,其背后的计算逻辑也是不一样的。不同情况下,适用的长度单位是不同的。例如,如果你需要元素的 width
或者 height
依赖于视窗的宽度或者高度,那么最可靠的长度单位就是 vh
, vw
, vmin
以及 vmax
。
本文里, 你可以学习到不同的长度单位,以及它们是如何影响其元素中的字体大小的。
像素单位(px)
像素是固定的长度单位。它们是根据用户屏幕上的每一个点的尺寸确定的。然而,现在的设备通常都有不同的像素密度。意即,当我们说有些设备的像素大小是标准设备的1/4时,它们的实际像素密度就是标准设备的四倍。不过这个差异可以通过使用参考像素reference pixel来避免。参考像素是指,在约一臂长的距离处(大约28英寸)「译者注:约71厘米」,在像素密度为96DPI的屏幕上的一个像素的尺寸大小。也就是说,一个像素的宽高约等于0.26mm。
使用像素设置文字元素的font-size既难维护,又对用户不那么友好。如果你总重新设计一个非常大的网站,改变所有元素的文字大小可能变成一个梦魇。你也许不得不修改很多元素的 font-size
,使得页面在不同断点下适用不同的屏幕尺寸。更有甚者,如果用户想通过设置浏览器的文字大小让文字变大或者变小,就不能生效了。
让我们看一下对不同元素使用像素设置 font-size
会有怎样的效果。下面是我们接下来要用来作为例子的的部分代码。
<div class="container-box">
This text is directly inside the parent `div` element.
<p>This is the first paragraph of our container.</p>
<p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
<p>I have also included a link to SitePoint as a direct child of the containing `div` element.</p>
<a href="https://www.sitepoint.com/">A link to SitePoint.</a>
</div>
下面是CSS给不同元素设置的字体大小。
div {
font-size: 20px;
}
code {
font-size: 18px;
}
p, a {
font-size: 22px;
}
参见 CodePen上 使用像素设置字体大小(By@SitePoint)。
正如你所见,每个元素的 font-size
和定义的像素值是相同的。这和元素嵌套并无关系。例如,两个链接的 font-size
都是22px。你可以尝试修改浏览器设置的字体大小,但你会发现,并不能生效。
简而言之,缺乏灵活性是使用像素设置元素 font-size
的缺点,应当避免。
Em
使用em作为长度单位可以帮你避免任何被用户设置覆盖产生的问题。设置 font-size
为1em的元素实际高度依赖与浏览器设置。除非用户或者你在其他地方设置,其默认大小是16px。
元素实际的 font-size
是根据其继承的字体大小计算出的。也就是说,如果一个元素继承的 font-size
是25px,那么设置该元素为2em时,其实际大小就是50px。
接下来的CSS代码把所有的元素的 font-size
都设置成em单位。
div {
font-size: 1.2em;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}
参加CodePen里的这个Setting Font Size in em Units(By@SitePoint)
前例中的第二个 div
是在另一个 div
元素里。我们同样设置 div
的元素 font-size
为1.2em。也就是说,第二个 div
的 font-size
是前一个 div
的1.2倍。例如,计算出的维基百科链接的 font-size
,在第一个div里是19.2px,但在第二个 div
里的是23.04px。比例约等于1.2。
如果你希望在一个自适应性的网站中根据不同的断点设置放大或者缩小不同元素的字体大小,你可以给 html
和 body
在不同断点下设置不同的 font-size
。这样其中的元素就都能够缩放了。
由于这一单位的具体值取决于给定元素继承的 font-size
,因此,如果要单独设置网站的某些部分的字体大小,比如独立的模块中的元素,则这一单位很有效。
Rem
Em唯一的问题就是有时候我们并不需要子元素的 font-size
随着父元素的 font-size
一起变化。继承 font-size
的逻辑会给计算整个元素的实际大小增加额外的复杂度。
你可以通过使用rem来避免这一缺陷。设置为1rem的值会让元素和root元素的 font-size
大小相同。这样你就不需要考虑字体 font-size
的继承问题了。
下面的CSS是把容器 div
的 font-size
设置为 rem
单位值。其他部分的元素依然是使用 em
作为 font-size
的单位。
div {
font-size: 1.2rem;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}
参见CodePen上使用rem设置字体大小的例子(by @SitePoint)。
容器 div
的 font-size
设置为rem,避免了字体大小的继承关系。
正如本例那样,你可以使用这个这个单位,给某个不同模块设置对应的 font-size
。这一来,就能让模块内所有元素基于他们的父元素设置 font-size
,也可以让整个模块独立出来。
百分比
使用百分比和em的计算行为相似。它们常用在自适应网站设计中与根据不同的页面宽度断点设置不同的字体大小。正如下例:
html {
font-size: 62.5%;
}
div {
font-size: 2rem;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}
因为浏览器的默认 font-size
是16px,所以 html
的元素 font-size
为62.5%的正好就是10px。这样就让页面其他的字体大小计算相对容易。例如,你可以调整一个元素的 font-size
为3rem,使其值为30px,或者4.2rem也就是42px,等等。
参加CodePen上的使用百分比设置字体大小的例子,(by @SitePoint)。
视窗单位(vw,vh,vmin,vmax)
视窗单位非常有趣。它们使你可以根据视窗的尺寸大小控制字体的 font-size
。如果使用得当,它们还可以避免通过不同断点设置字体大小的实现代码。这是因为这些单位值会随着视窗的高度、宽度做连续性的变化。例如,1vw在视窗为400px宽时是4px,在视窗宽度为1000px时,就变成了10px。SitePoint上已经有一篇文章专门讨论视窗单位和它们的应用场景。想了解的话可以去看一下那篇文章。
参加CodePen上的使用视窗单位设置字体大小的例子。(By@SitePoint)。
使用视窗单位的问题就是计算出的 font-size
可能会让字体不适合阅读,字体有可能非常小或者非常大。一个小技巧就是在使用视窗单位的同时,也使用其他字体设置,避免字体过大或者过小。这个技巧在视窗单位的基础排版一文中有具体解释。
其他绝对值单位
CSS也允许其他很多绝对值单位,这些单位在屏幕排版的情况下使用较少,更多是用在传统的打印介质中。你可以使用pt或者pc设置打印的字体大小版式。这些值分别使用0.0123或者0.1666英寸为单位。类似的,你还可以使用英寸(in),厘米(cm)和毫米(mm)来设置页面的打印边距。
使用关键字来设置字体大小
另一个选择是使用关键字设置 font-size
。有两种类型的关键字:绝对和相对的。绝对值关键字常用在指定字体大小,其值是根据不同的用户浏览器计算出的一个数据表里的某项。绝对值关键字有: xx-small
, x-small
, small
, medium
, large
, x-large
以及 xx-large
。
如果你选择使用相对值关键字,那么 font-size
就会根据在表里个各项以及该元素的父元素的 font-size
计算决定。有两个相对值关键字: larger
以及 smaller
。如果父元素的 font-size
是 x-small
,其子元素的 font-size
设置成 larger
,那么就相当于子元素的 font-size
是 small
。参见下例:
div {
font-size: larger;
}
code {
font-size: smaller;
}
p, a {
font-size: small;
}
参见CodePen上的使用关键字设置font-size的例子。(By@SitePoint)。
例中,第二个 div
是在另一个 div
之内。因为我们把 div
的 font-size
设置成 larger
,因此增加了嵌套内的第二个容器的 div
的字体大小。另外,嵌套对于段落中的文字没有效果。这是因为它们的 font-size
是用绝对值关键字设置的。
浏览器支持
在决定在生产环境上使用哪种单位之前,你应该先确定你的目标浏览器能够支持。
绝对值单位比如px,pt,pc,in,cm和mm是在所有浏览器都支持的。类似的,em单位也是所有主流浏览器都支持的,包括老一点版本的IE。
但是,rem并不能在IE8或者更低版本的浏览器支持。即便在IE9或者IE10的版本里,使用rem给缩写的 font
属性设置字体大小时,都可能使赋值失败。这两个浏览器也不支持给伪元素使用rem单位。
本文讨论的所有单位中,视窗单位的浏览器支持是最少的。记住IE11和Edge都不支持vmax单位。
结论
本文里,我们讨论了在CSS中使用不同单位长度以及它们各自的不同之处。总的来说,你可以尽量避免使用绝对单位,应该多尝试使用相对单位。在相对单位里,你应该在模块当中使用em设置字体大小,给独立模块使用rem单位,例如给一个模块的根元素使用rem。你也可以结合使用视窗单位和其他单位,来保证你的排版会随着视窗宽高变化而自动适应。
往期精选文章 |
---|
使用虚拟dom和JavaScript构建完全响应式的UI框架 |
扩展 Vue 组件 |
使用Three.js制作酷炫无比的无穷隧道特效 |
一个治愈JavaScript疲劳的学习计划 |
全栈工程师技能大全 |
WEB前端性能优化常见方法 |
一小时内搭建一个全栈Web应用框架 |
干货:CSS 专业技巧 |
四步实现React页面过渡动画效果 |
让你分分钟理解 JavaScript 闭包 |
小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。
- 备库报警邮件的分析案例(三)(r7笔记第16天)
- 简单易学的机器学习算法——神经网络之BP神经网络
- 24(02)多线程锁,线程通讯,线程组,线程池,多线程三种方式,匿名内部类,定时器,设计模式,单例模式,Runtime
- Go代码打通HTTPs
- 一个简单的MySQL参数导致的连接问题解惑(r7笔记第33天)
- [基础篇]Go语言变量
- [转载]Golang 编译成 DLL 文件
- [转载]Go JSON 技巧
- 简单易学的机器学习算法——Rosenblatt感知机的对偶解法
- Spring-拾遗
- Golang面试题
- 简单易学的机器学习算法——基于密度的聚类算法DBSCAN
- 厚土Go学习笔记 | 29. 接口
- Golang Template 简明笔记
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例