是否存在不依赖字体的em与字体高度相互转换的方法?
问题解答
1. 是否存在不依赖字体的em与字体高度转换方案?
不存在。
1em的定义是当前字体的em正方形边长,仅与字号设定绑定,但字体实际渲染时的可见高度、以及line-height为1时的实际占用高度,由字体文件内置的上升部、下降部、预留行间距等设计师自定义参数决定,没有全行业统一的强制标准,不可能脱离具体字体完成通用转换。你示例中观察到的line-height:1的文本span高度高于1em的块元素,就是因为字体内置的上升+下降+预留间距总高度大于1em导致的,这个差值完全由字体本身决定。
2. 不同字体中真实字体高度与em的差值是否一致?
完全不一致。
不同字体的设计差异极大:常规印刷字体的总高度通常在1em~1.3em之间,手写风格、装饰性艺术字体的总高度可能达到1.5em甚至更高,差值没有任何统一规律。你可以自行修改代码的font-family属性测试,切换为宋体、微软雅黑、等宽字体后,高度差会有明显变化。
3. 示例中的1.2em是通用特性还是特定字体的独有属性?
属于你当前测试环境默认字体的独有属性,不存在通用的1.2倍换算规则。
示例参考代码
CSS代码
span.text { border: 1px solid blue; line-height: 1; } span.box { display: inline-block; border: 1px solid red; height: 1em; } span.true-height { display: inline-block; height: 1.2em; width: 1em; background: green; vertical-align: text-bottom; }
HTML代码
<span class="text">This box is taller than 1em</span> <span class="box">1em</span> <span class="true-height"></span>
内容的提问来源于stack exchange,提问作者Seph Reed
相关产品推荐
相关产品推荐

