CSS 中, 为什么指定了 font-size 和 line-height, 生成的行内框还是比预期的要大一点?

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 3280 days ago, the information mentioned may be changed or developed.

CSS 权威指南"基本视觉格式化"一章中讲到: 对于行内非替换元素或者匿名文本来说, font-size 指定了它们的 content area 的高度, 由于 inline box 是由 content area 加上上下的 half-leading 构成的, 那么如果元素的 leading 为 0, 在这种情况下, font-size 指定了 inline box 的高度.

<div style="background-color: teal;">
  <span style="font-size: 80px; line-height: 1em; background-color:grey; opacity: 0.7; padding: 0">Lorem maiores atgfyq.</span>
</div>

以上的例子, font-size 和 line-height 都设置为 80px, 按理说 span 的 inline box 就是 80px.

但是从开发者工具看, 拥有绿色背景的 div 的高度才是 80px, 不懂为什么 span 的高度要比 80px 大呢?

Supplement 1 · Jun 15, 2017

已经找到答案了, 谢谢大家.

应该说font-size指定的是em box的高度, 而不是内容区的高度.

浏览器可能根据字体的em box来绘制内容区, 也可能根据字体的实际字形的来绘制内容区.

如果一个字体的字形和em box高度相等, 那绘制出来的框就是font-size指定的.

如果em box和字形不等, 像截图中使用的Times字体, em box是2048, 实际字形是2355, 那么因为chrome是根据实际字形来绘制内容区的, em box被指定了80px, 那对应的实际字形就是(2355/2048)*80=92px, 和截图是吻合的.

结论如截图所言: 用CSS无法做到真正准确的格式编排.

如果想让绘制出来的字体是80px高, 可以采用一楼 @seki 说的方法:

把span改成block或inline-block, 其他不变(如果很介意字体把头脚伸出窗外, 可以用overflow截掉, 或者把字体调小一点)

Supplement 2 · Jun 15, 2017

另外, firefox应该是根据em box来绘制内容区的, 因此即使span是inline, ff也能把它绘制成80px的高度.

13 replies • 2017-06-15 10:41:45 +08:00

seki

Jun 14, 2017

font-size 指定的是字体的高度，但是不能指定每个字形在给定字体高度下的实际高度，导致了 span 的高度大于 80px
如果你需要让 span 是 80px，可以试试 display: block 或者 display: inline-block
加上 overflow: hidden 就能把溢出的部分给隐藏起来 - -

marvinwilliam

Jun 14, 2017

默认的 padding 和 margin?

laoertongzhi

Jun 14, 2017

今天正好看到这篇文章，可以解答你的疑惑。

https://juejin.im/post/593fcecb5c497d006ba82be1?utm_source=gold_browser_extension

watzds

Jun 14, 2017 via Android

因为最后那个 q，baseline 什么的

leeg810312

Jun 14, 2017

这是不同浏览器默认字体、字体渲染和行高的处理不同，在 Mac Firefox 和 Win IE11 下这段代码没有显示问题，Mac Chrome 下即使 span 加 display: inline-block 文字也超出 div 背景，设置 line-height: 1.2em 才显示正常，猜测 Chrome 默认 line-height: 1.2 且渲染以这个行高来优化页面布局。

Tonni

Jun 14, 2017

字体问题，建议楼主看下这篇文章，讲解的比较详细： http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align。

Tonni

Jun 14, 2017

接👆，不带句号： http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

Chingim

Jun 14, 2017

@marvinwilliam padding 我已经显式设置为 0 了, 至于 margin, 它不算在背景色的范围里.

@leeg810312 firefox 的确没这个问题, 谢谢! 看来我对规范的理解并没有错.

@laoertongzhi 谢谢, 这个信息很关键! 感觉就是写给我看的.
按照这篇文章说的, 只有字体设计高度为 1000unit 时, font-size 和 line-height 属性才能指哪打哪? 有点不可思议, 因为如果一个字体设计高度是 4096 时, 即使设置了 font-size 和 line-height 为 100px, 那字体渲染出来还是 4.096*100px = 409.6px. 这也比预想的大得离谱了. 楼上的朋友说 firefox 没这个问题, 我觉得 firefox 才是准确实现了规范吧. 因为:
1. 因为 div 的高度渲染的结果是 80px, 所以可以知道 chrome 计算 span 的 line box 的高度也是 80px.
2. 而规范里说, line box 由 content area 加上上下的 half-padding 组成. 这里 half-padding 为 0, 因此 content area 应该是 80px.
3. 背景色只应用在 content area+padding 上. 但是背景色却渲染出了>80px 的高度.

根据以上, 我觉得是 chrom 的实现出了问题...

Chingim

Jun 14, 2017

@Tonni 谢谢, 我研读下. 这个博主好像很专业

sdwill

Jun 14, 2017

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

SakuraKuma

Jun 14, 2017

同推荐#6 的文章，十分好

qyc666

Jun 15, 2017

我觉得准确说 font-size 只是能够影响 content area 的高度，具体它的高度是多少还是取决于渲染了什么字体。

CSS 2.1 规范也没有明确指定浏览器要如何确定 content area 的高度（参考 https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced ）

至于 Firefox 你看到的可能只是一个巧合，你试试把字体换成 monaco 或者 "comic sans ms"，灰色区域还是溢出

Chingim

Jun 15, 2017

@qyc666 谢谢提醒, 我太武断了, ff 确实是巧合.