font-size

font-size 和 vertical-align 的隐秘故事

line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的，vertical-align 和 font-size 属性背后其实也有有着关联的。

理解 font-size 与 ex、em 和 rem 的关系

ex 是字符 x 的高度，em 就是“中”等汉字的高度。em 相对于当前 font-size 大小计算，rem 相对于跟元素。

理解 font-size 的关键字属性值

font-size 的关键字属性值分以下两类：

  • 相对尺寸关键字
    • larger：大一点，是 big 元素的默认 font-size。
    • smaller：小一点，是 small 元素的默认 font-size。
  • 绝对尺寸关键字
    • xx-large：很大很大，是 h1 元素的默认 font-size。
    • xx-large：很大，是 h2 元素的默认 font-size。
    • large：大，是 h3 元素的近似 font-size。
    • medium：不大不小，和 h4 的计算值相同。

改变浏览器的默认字号后，如果 font-size 使用的是像素，则不改变；如果使用的是百分比，则改变。

font-size : 0 与文本隐藏

桌面 chome 浏览器的文字 font-size 计算值不能小于 12 px。但是 font-size 为 0px 时例外，此时文字会被隐藏。

font-family

字体主要分为以下几种：

  • serif：衬线字体
  • sans-serif：无衬线字体
  • monospace：等宽字体
  • cursive：手写字体
  • fantasy：奇幻字体
  • system-ui：系统 UI 字体

参考

【1】CSS 世界@张鑫旭