【问题标题】：Fixing font vertical height issue for multiple fonts修复多种字体的字体垂直高度问题
【发布时间】：2018-07-12 12:54:09
【问题描述】：

我正在创建一个 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 中获取尺寸只是为了显示差异。

【问题讨论】：

你会分享一些你的，复制到你遇到问题的sn-p中以便更好地澄清，我也发现这个看看它是否对你有帮助iamvdo.me/en/blog/…
@AdernNerk 我更新了答案。您与我分享的文章，我曾经提到过，但不幸的是我无法理解 CSS 解决方案。
所以你想要的是，让每个字体系列的高度相等，不管你选择什么风格？
@AdernNerk 我想垂直居中对齐文本。如果您参考上面的图像文字不是居中对齐的。

标签： html css fonts sass themes

【解决方案1】：

尝试使用line-height 属性。

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

我将 body font-size 设置为 16px 以确保两个字体系列具有相同的大小 - 取决于浏览器 1em 可能不同 - 并从按钮中删除了垂直填充并使用了一条线- 正文字体大小 +10px 的高度以获得相同的结果。

额外提示（已编辑）：line-height 不能不应与input 元素一起使用，只需在此处使用高度 - 小提琴后面的细节。

https://jsfiddle.net/5j4L2tpj/

原因是因为在某些浏览器中——例如 iOS 版 Safari——文本的垂直对齐被弄乱了。简单的height 属性按预期工作，完美地垂直对齐文本 - 在这种情况下不需要垂直padding。总而言之，只需在输入上使用height，不使用line-height 或垂直padding，即可在所有浏览器/设备上按预期完成工作。

PS 您的 Arial 字体系列有误。

【讨论】：

你是如何计算出line-height的？
@Ryxle 假设默认 body 大小为 16px 并且 OP 的垂直填充为 5px（总共 5+5=10px），那么我任意选择了 26px作为按钮的行高。对于普通文本，我会使用最接近 1.2 x body font-size 的文本，这将等于 ~ 20px 以获得更好的可读性
奖金提示不准确。
@JanKyuPeblik 你是绝对正确的，感谢您的关注。我改写并添加了我为什么这么说的解释。

【解决方案2】：

使用 flex 怎么样？

    button {
        display: flex;
        align-items: center;
    }

检查flex的跨浏览器前缀

【讨论】：

【解决方案3】：

这里有一个解决方案：

<!-- language: lang-html -->
<button id="arial">
    <span>arial</span>
</button>

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




<!-- language: lang-css -->
#arial {
    font-family : airal;
    font-size   : 1em;
}

#tahoma {
    font-family : Tahoma;
    font-size   : 1em;
}

button {
    position : relative;
    width    : 100px;
    height   : 40px;
}

button span {
    position  : absolute;
    width     : 100%;
    left      : 0;
    top       : 50%;
    transform : translateY(-50%);
}

检查更新的小提琴：https://jsfiddle.net/upb7cL5g/4/

【讨论】：

【解决方案4】：

好吧，如果我理解正确，您当前正在使用填充/边距垂直对齐元素（在您的情况下为文本），因此如果高度发生变化，位置也会随着您计算距离而变化，因此您需要一个自动居中的解决方案通过计算高度本身。这就是我的理解。好吧，我猜你需要top : calc(50% - 10px);

这是一个 JSFiddle https://jsfiddle.net/xnjq1t22/

此链接包含更多技巧，可将项目垂直居中对齐http://jsfiddle.net/techsin/FAwku/1/

【讨论】：

如果我弄错了，或者这不是你要找的东西，请告诉我，但我做了尽可能多的挖掘，我从我的感觉中理解的是你想要对齐不同的字体系列居中。

【解决方案5】：

那不是 Arial。

你已经（在小提琴中）指出了一个 airal 的字体系列，它不存在，并被可能是 Times Roman 所取代。默认尺寸（至少在我的 Firefox 57 上）对我来说似乎不同。一旦您确定所涉及的实际字体，我会尝试重现该问题。

【讨论】：