为什么CSS的em单位按实际渲染字体定义而ex单位用首个可用字体定义？

为什么em和ex的参考字体规则不一样 #

两个单位的设计定位从根源上就不同：

• em是为单个字符的相对大小计算服务的，它要保证每个字符本身的宽高比例正确，所以自然要跟随最终渲染这个字符的实际字体走：比如你设置font-family: "思源黑体", Arial，普通中文字符用思源黑体渲染，就取思源黑体的em值；遇到思源黑体不支持的生僻字符 fallback 到Arial渲染，就取Arial的em值，完全适配单个字符的渲染需求。
• ex是为全局排版的统一参考服务的，不管是用ex设置行高、段落缩进还是元素间距，都要求整个上下文里的1ex是固定值，不然一行里每个字符对应的ex都不一样，整个排版会完全混乱。所以必须给ex指定一个全局统一的基准字体，也就是规范里提到的first available font。

为什么用空格字符匹配first available font #

规范里对first available font的定义如下：

first available font会应用在'ex'、'ch'等字体相对长度的定义，以及'line-height'属性的定义等场景中，它指的是给定'font-family'列表下，可匹配U+0020（空格）字符的首个可用字体；如果无可用字体则使用用户代理的默认字体。

选择U+0020空格作为匹配字符是非常务实的设计，原因很简单：

• 空格是所有正常文本内容里必然存在的字符，而且所有符合规范的字体，不管是中文、西文还是小语种字体，一定会包含空格字符的定义，不存在匹配不到的情况。
• 如果你真的用小写x来匹配基准字体反而会出问题：比如你写的是纯中文内容，font-family优先级最高的是中文字体，不少早期的中文字体根本没有收录小写x的尺寸信息，反而找不到可参考的基准。
• 匹配到的首个支持空格的字体，就是你font-family列表里优先级最高的主字体，用它的x高度作为ex的全局基准，和整个文本的主风格匹配度最高，就算个别字符fallback到其他字体，全局排版的比例也不会出现大的偏差。

内容的提问来源于stack exchange，提问作者peter.slizik