修复多种字体的字体垂直高度问题

Question

我正在创建一个css主题引擎,我遇到的一个问题是不同字体的垂直高度问题.我在线阅读了很多文章,所有解决了特定字体系列的解决方案.但在我的主题引擎中,用户可以使用许多字体作为选择.对齐图标和标签时,此垂直高度问题非常痛苦.所以我想知道是否有办法实现这一目标.

我在jsFiddle中创建了一个示例代码,请使用此URL jsfiddle进行检查

// html
<button id="arial">
 arial
</button>

<button id="tahoma">
 helvetica
</button>

// css
#arial {
  font-family: airal;
  font-size: 1em;
  padding: 5px 10px;
}

#tahoma {
  font-family: Tahoma;
  font-size: 1em;
  padding: 5px 10px;
}

所以你可以看到我用arial与tahoma(请不要介意按钮文本).您可以看到文本定位和顶部和底部的空间如何变化.像素值不是网络像素值我只是缩放图像并在photoshop中获得维度只是为了显示差异.

Answer 1

尝试使用该line-height属性.

button {
  line-height:26px;
  vertical-align:middle;
}

我设置body font-size,以16px确保双方的字体系列具有相同的尺寸-取决于浏览器1em可能会有所不同-并已删除的按钮垂直填充和使用的+ 10px的身体字体大小的line-height来得到相同的结果.

奖金提示(已编辑): line-height 不能 不应该与input元素一起使用,只需在那里使用高度 - 小提琴之后的细节.

https://jsfiddle.net/5j4L2tpj/

原因是因为在某些浏览器中 - 例如iOS的Safari - 文本的垂直对齐混乱了.简单height属性按预期工作,完全对齐垂直文本 - padding在这种情况下不需要垂直.总而言之,只需使用height输入,无需line-height或垂直padding,并按预期完成所有浏览器/设备的工作.

PS你有一个Arial字体系列的拼写错误.