CSS中1ex单位转换为6.9328px的计算逻辑问询

嘿，这个细节问题抓得很准！我来给你拆解下Chrome是怎么把1ex转换成6.9328px的：

首先得明确1ex的本质：它是当前使用字体中字母「x」的高度（也就是字体的x-height值），不同字体的x-height和自身字号的比例不一样，这也是为啥Georgia和其他字体的1ex对应的px会有差异。

具体到你的CSS场景，计算步骤是这样的：

1. 先算出当前元素font-size对应的px值
   你给#mainContent p设置了font-size: 0.9em，em是相对单位，默认浏览器根元素（<html>）的字号是16px，所以0.9em对应的px值为：

   0.9 × 16px = 14.4px
   

2. 乘以Georgia字体的x-height/字号比值
   Georgia字体的x-height和自身字号的比值大概是0.4814（这个是字体本身的固有属性，不同字体这个比例不同，比如Arial的x-height比例就更高）。所以1ex对应的px值就是：

   14.4px × 0.4814 ≈ 6.9328px
   

通用计算公式总结 #

把这个逻辑提炼成通用公式就是：

1ex的px值 = 当前元素的font-size（px单位） × 对应字体的x-height与font-size的比值

额外补充一句：不同浏览器对字体x-height的计算可能有极细微的差异，但Chrome的核心逻辑就是基于字体本身的x-height属性来做单位换算的，你可以在开发者工具的「Computed」面板里查看元素的实际font-size，再结合字体的x-height比例反推验证。

内容的提问来源于stack exchange，提问作者MYB