html - 为什么两种字体对于相同的字体大小显示不同高度的文本?

标签 html css

为什么用两种不同字体书写的文字,字体大小相同,看起来不一样?例如,在下面的代码中,“A”设置为 50px。在输出中我看到两个不同大小的 A。

有人可以解释或提供资源来理解文本的结构和设置字体大小、行高等。我找不到明确的解释。

body {
  font-size: 100px;
}

.one {
  font-family: Arial;
}

.two {
  font-family: "Source Serif Pro";
}
<body>
  <span class="one">A</span>
  <span class="two">A</span>
</body>

最佳答案

In the days of metal type, the size of the glyphs in any particular point size was determined by fitting the tallest ascender and the deepest descender in the entire character set of that particular font onto the metal type, or sort.

In digital type, these physical restraints are no longer an issue, and therefore the glyph size in relation to the digital bounding box, or design space, are assigned by the typeface designer. For this reason, type sizes and appearances can vary greatly from font to font.

https://www.creativelive.com/blog/why-do-font-sizes-vary/

关于html - 为什么两种字体对于相同的字体大小显示不同高度的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57731481/

相关文章:

html - 响应式网页有问题

python - 带下拉菜单的动态 html 电子邮件

html - 下推父元素的无序列表

html - 放置 tr :nth-child(even) inside a table tag

javascript - 覆盖 element.style{width : ;} value in jquery sticky nav

Javascript、HTML 和 CSS 网格

html - 如何从图标集图片中加载一个图标

html - 如何在 div 中的一行中显示每两个 <p>

html - 固定位置 div 内的响应式完美正方形。第二部分

css - 单击后的基础按钮