font-size

Mr.Dylin...大约 8 分钟

font-size

font-size 和 vertical-align

line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的，于是，看上去八辈子都搭不上边的 vertical-align 和 font-size 属性背后其实也有有着关联的。

p {
  font-size: 16px;
  line-height: 1.5;
}
p > img {
  vertical-align: -25%;
}

所以最终 vertical-align 的计算值为16px * 1.5 * -25% = -6px

根据这种特性我们可以模拟无论 font-size 如何变化，后面图标都垂直居中对齐的应用

p > img {
  width: 16px;
  height: 16px;
  vertical-align: 25%;
  position: relative;
  top: 8px;
}

font-size 与 ex,em,rem

ex
是字符 x 高度，显然和 font-size 关系密切，font-size 值越大，自然 ex 对应的大小也就大
em
在传统排版中指一个字模的高度,其一般由'M'的宽度决定（因为宽高相同），之所以叫作 em 完全取决于 M 的字形,毕竟英文 26 个字母方方正正的不算多,但是方方正正的汉字每一个字都正好一个 em
请问下面 margin-left 的值是多少？
```
h1 {
  font-size: 2em;
  margin-left: 0.67em;
  margin-right: 0.67em;
}
```
<h1>元素此时 font-size 是 2em，算一下就是 32px（16px * 2），因此，此时里面汉字的高度应该是 32p，于是 margin-before 的像素计算值为 32px × 0.67 = 21.44px
所以总结下来，em 是根据当前 font-size 大小计算的，所有相对单位的好处都是一样的，样式表现更具有弹性。
rem
em 是相对于当前元素，rem 相对于根元素，本质差别在于当前元素是多变的，根元素是固定的，也就是说，如果使用 rem，我们的计算值不会受当前元素 font-size 大小的影响，
exp(假设根的font-size:16px):
```
h1 {
  font-size: 2em;
  margin-left: 0.67rem;
  margin-right: 0.67rem;
}
```
最终的 margin-left 为 16 × 0.67 = 10.72 像素
常见的 rem 的应用：要想实现带有缩放性质的弹性布局，使用 rem 是最佳策略
常见的 em 的应用： em 实际上更适用于图文内容展示的场景，对此进行弹性布局
例如，<h1>～<h6>以及<p>等与文本内容展示的元素的 margin 都是用 em 作为单位，这样，当用户把浏览器默认字号从“中”设置成“大”或改成“小”的时候，上下间距也能根据字号大小自动调整，使阅读更舒服。

font-size 的属性值

长度值 1em,1px
百分比值 100%
关键字
- 相对尺寸关键字(指相对于当前元素 font-size 计算)
  - larger：大一点，是<big>元素的默认 font-size 属性值。
  - smaller：小一点，是<small>元素的默认 font-size 属性值。
- 绝对尺寸关键字(与当前元素 font-size 无关，仅受浏览器设置的字号影响)
  - xx-large：好大好大，和<h1>元素计算值一样。
  - x-large：好大，和<h2>元素计算值一样。
  - large：大，和<h3>元素计算值近似（“近似”指计算值偏差在 1 像素以内，下同）。
  - medium：不上不下，是 font-size 的初始值，和<h4>元素计算值一样。由于字号受浏览器的字号影响，我们常常设置初始值
```
body {
  font-size: 14px;
}
```
  - small：小，和<h5>元素计算值近似。
  - x-small：好小，和<h6>元素计算值近似。
  - xx-small：好小好小，无对应的 HTML 元素。

针对于下面两个 html，请问有什么区别？

html {
  font-size: 14px;
}
html {
  font-size: 87.5%;
}

在绝大多数场景下，两者没有差别，全都计算为 14px，但是如果用户对浏览器的字号进行了调整，font-size:87.5%的计算值就会改变

现在我们有个特殊需求：

正常情况下，14 像素的文字大小是足够的，但是，如果是高度近视的用户，或者上班急急忙忙忘记戴眼镜，或者在投影仪上投影网页内容，此时就有大字号浏览网页的需求，如果使用固定的像素单位，显然对这些使用场景是不友好的。好在浏览器还提供了“网页缩放”功能，但是此功能也是有局限性的：如果网页是定宽非响应式的，则网页放大后窗体以外的内容就看不到了，在 Chrome/Firefox 浏览器下甚至连个水平滚动条都没有，说不定重要信息就会看不到。由此可见，我们是不能轻易忽视浏览器字号设置功能的。

然而，现代网页设计得很精致，要想网页布局跟随字体内容缩放实在两难，要么使用 em，但 em 计算与当前 font-size 耦合，不好维护；要么使用 rem，但 IE8 不支持，桌面端使用尴尬。因此，现实的压迫导致我们只能使用 px 进行布局，尤其桌面端网页。如何权衡“易于实现维护”，“视觉还原”，“可访问性”这三者，我这里有两个珍藏的建议。

（1）即使是定宽的传统桌面端网页，也需要做响应式处理，尤其是针对 1200 像素宽度设计的网页，但只需要响应到 800 像素即可，可以保证至少有 1.5 倍的缩放空间，如果做到这一步，那么是否需要响应浏览器的字号设置这一点就可以忽略。

（2）如果因各种原因无法做响应式处理，也没有必要全局都使用相对单位，毕竟成本等现实问题摆在那里，其实只需要在图文内容为主的重要局部区域使用可缩放的 font-size 处理即可。例如，小说网站的阅读页、微信公众号文章展示区、私信对话内容区、搜索引擎的落地页、评论区等，都强烈建议摒弃 px 单位，而采用下面的实践策略。

容器设置 font-size:medium，此时，这个局部展示区域的字号就跟着浏览器的设置走了，默认计算值是 16px。
容器内的文字字号全部使用相对单位，如百分比值或者 em 都可以，然后基于 16px 进行转换。例如：

.article {
  font-size: medium;
}
.article h1 {
  font-size: 2em;
  margin: 0.875em 0;
}
.article p {
  font-size: 87.5%; /* 默认字号下计算值是 14px */
  margin: 1em 0;
}

同时使用自适应流体布局，间距什么的也使用相对单位，例如上面 margin 使用的是 em 单位。于是，当用户改变了浏览器的字号后，整个阅读区域的所有字样甚至布局都会跟着放大，文字一下子就看清楚了。这种局部处理的好处在于，页面的导航、侧边栏这些不需要长时间阅读的模块还是原来的像素布局，还是那么精致，丝毫不受影响。就这么很微小的变动，就可以让你的网页在可访问性这一块超越大多数的网站，何乐而不为？

可以看到，绝对尺寸关键字在实际项目中还有很有价值的，但有价值的仅仅是 medium ，至于其他关键字，作用仅限于字面上的那点儿，大家了解一下即可。

font-size:0 与文本的隐藏

桌面 Chrome 浏览器下有个 12px 的字号限制，就是文字的 font-size 计算值不能小于 12px 正是这种限制导致我们在使用 em 或 rem 进行布局的时候，不能这么处理：

html {
  font-size: 62.5%;
}

理论上，此时根字号计算值是 16px * 0.625=10px，于是，width:14px 可以写成 width:1.4em，省了很多计算的麻烦。但是，在 Chrome 下，由于 12px 的限制，根字号计算值实际不是 10px，而是 12px，所以，可以试试处理成这样：

html {
  font-size: 625%;
}

此时根字号计算值是 100px，既计算无忧，又没有 12px 的最小字号限制。

但是我个人建议还是不要这样处理，尤其使用 em 的时候，因为 font-size 属性和 line-height 属性一样，由于继承性的存在，会影响贯穿整个网页，100px 的环境 font-size 一定会将平时不显山露水的底边对齐问题、间隙问题等放大，导致出现一些明显的样式问题，如果对 CSS 了解不是很深刻，怕是很难明白为什么会发生这样的问题。同时这样做也限制了 px 等其他单位的使用，有时候是比较要命的。

因此，我的建议是仍基于浏览器默认的字号进行相对计算，也就是 medium 对应的 16px，16 这个数字是一定可以整除的，因此计算成本还行

注意：如果 font-size:0 的字号表现就是 0，那么文字会直接被隐藏掉