HTML / CSS:在保留行高的同时混合字体

检查伴侣711

专家们,

我正在尝试使用两种不同的字体创建标题,同时保留行高。我将两种字体的font-size和line-height指定为48px。我想了解的是为什么标题元素的高度为49px。

该问题显示在下面的JS Bin中:http : //jsbin.com/kelureroze/2/

提前致谢。

阿罗奇

两种字体的字体规格略有不同,这意味着这两种字体从内嵌框顶部到基线以及从基线到内嵌框底部的距离是不同的。

字体按其基线对齐,因此它们的内联框的顶部和底部相对于彼此略有偏移。

因为h1块的高度是其所包含的线框的高度,并且该线框必须足够大以容纳从两个线内框顶部的上部到两个线内框下部的两个线内框。框底部,总行高略大于任一字体的行高。

如果您阻止这两种字体在它们的基线上对齐:例如,h1 font { vertical-align:top; }您会看到h1的高度下降到48px。

参见http://jsbin.com/hisihojozi/2/edit

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

html行高问题;<br> vs CSS行高

来自分类Dev

在保留宽度的同时右移html表

来自分类Dev

HTML / CSS等于列高

来自分类Dev

外部CSS的@import字体VS HTML链接

来自分类Dev

HTML字体由于CSS格式无法点击

来自分类Dev

将字体导入CSS或HTML吗?

来自分类Dev

CSS字体平滑HTML电子邮件

来自分类Dev

使用 CSS 更改 HTML 按钮字体

来自分类Dev

使用CSS防止html表格的表格行增长(即保持固定的行高)

来自分类Dev

如何同时更改CSS和HTML文件

来自分类Dev

在保留PHP标记的同时剪切html输入

来自分类Dev

在保留HTML实体的同时如何设置BeautifulSoup属性?

来自分类Dev

在保留PHP标记的同时剪切html输入

来自分类Dev

如何在保留格式的同时删除这些html元素?

来自分类Dev

如何在保留内部HTML格式的同时使用DOMDocument访问HTML节点?

来自分类Dev

在保留原始html结构的同时包装匹配的html页面正则表达式

来自分类Dev

在HTML中混合颜色

来自分类Dev

在HTML中混合Javascript

来自分类Dev

混合APP HTML

来自分类Dev

嵌套表格行HTML CSS

来自分类Dev

html中的行更改css

来自分类Dev

缩进表格行HTML CSS

来自分类Dev

HTML CSS表行重叠

来自分类Dev

html中的行更改css

来自分类Dev

HTML替换字体标签

来自分类Dev

在PHP代码中混合HTML代码和CSS样式

来自分类Dev

HTML / CSS-双倍宽,双高等宽字体

来自分类Dev

需要CSS / HTML中的字体名称大写吗?

来自分类Dev

HTML / CSS:表格字体大小在移动设备中不同