CSS 中, 为什么指定了 font-size 和 line-height, 生成的行内框还是比预期的要大一点?
Chingim · 2017-06-14 12:50:10 +08:00 · 5436 次点击这是一个创建于 2710 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 大呢?
第 1 条附言 · 2017-06-15 09:47:01 +08:00
已经找到答案了, 谢谢大家.
应该说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截掉, 或者把字体调小一点)
第 2 条附言 · 2017-06-15 09:57:20 +08:00
另外, firefox应该是根据em box来绘制内容区的, 因此即使span是inline, ff也能把它绘制成80px的高度.
 |
1
seki 2017-06-14 13:08:25 +08:00  1
font-size 指定的是字体的高度，但是不能指定每个字形在给定字体高度下的实际高度，导致了 span 的高度大于 80px
如果你需要让 span 是 80px，可以试试 display: block 或者 display: inline-block 加上 overflow: hidden 就能把溢出的部分给隐藏起来 - - |
 |
2
marvinwilliam 2017-06-14 13:09:41 +08:00
默认的 padding 和 margin?
|
 |
3
laoertongzhi 2017-06-14 13:11:54 +08:00 1
|
 |
4
watzds 2017-06-14 13:34:59 +08:00 via Android
因为最后那个 q，baseline 什么的
|
 |
5
leeg810312 2017-06-14 13:42:42 +08:00 1
这是不同浏览器默认字体、字体渲染和行高的处理不同，在 Mac Firefox 和 Win IE11 下这段代码没有显示问题，Mac Chrome 下即使 span 加 display: inline-block 文字也超出 div 背景，设置 line-height: 1.2em 才显示正常，猜测 Chrome 默认 line-height: 1.2 且渲染以这个行高来优化页面布局。
|
 |
6
Tonni 2017-06-14 14:05:55 +08:00 1
字体问题，建议楼主看下这篇文章，讲解的比较详细： http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align。
|
|
7
Tonni 2017-06-14 14:06:53 +08:00
|
 |
8
Chingim OP @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 的实现出了问题... |
 |
10
sdwill 2017-06-14 15:34:17 +08:00
|
 |
11
SakuraKuma 2017-06-14 16:12:24 +08:00
同推荐#6 的文章，十分好
|
 |
12
qyc666 2017-06-15 10:09:49 +08:00 1
我觉得准确说 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"，灰色区域还是溢出 |
Select Language