Question

我正在编写一个用于打印应用程序的Web，并尝试了解浏览器如何在段落中呈现文本。下面的链接对于理解行高，字体度量和vertical-align：

之间的关系非常有价值

https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

但是，正如我的下面的代码集所示，当文本节点从一个字体系列（本例中为Allura）继承时，浏览器会以不同的方式呈现段落的整体高度，但是与另一个字体系列内联样式（本例中为Pt Serif），而不是段落本身只是一个字体系列＆＃34; PT Serif＆＃34;。

https://codepen.io/itozer/pen/LzOoxp

<style>
p {
  text-align: center;
  width: 500px;
  font-size: 50px;
  line-height: 1.4em;
}
</style>

<p id="paragraph1" style="position: absolute; top: 0; left: 0; font-family: PT Serif;">
  The lamp once out<br>
  Cool stars enter<br>
  The window frame.
</p>

<p id="paragraph2" style="position: absolute; top: 0; left: 550px; font-family: Allura;">
  <span style="font-family: PT Serif;">
    The lamp once out<br>
    Cool stars enter<br>
    The window frame.
  </span>
</p>

（注意：我知道将paragraph2的span的vertical-align更改为top会使段落相同，但这最终不能解决我的问题）

有人可以提供有关为什么上面的codepen中的paragraph2的整体高度大于段落1的整体高度的信息吗？

使用span和inline font-family

0 个答案: