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 世界@张鑫旭