css - 使用某些字体在输入元素内垂直居中文本的问题

Question

我想为我的网站使用来自谷歌字体的自定义字体（Source Serif Pro - https://fonts.google.com/specimen/Source+Serif+Pro?category=Serif&query=serif+pro）。问题是，正如我尝试过的大多数衬线字体一样，它有我认为所谓的下降体。

例如，如果您单击链接并检查文本示例，您可以清楚地看到诸如 g、p、q 之类的字母都“将整个文本向上推”，这导致输入元素内的文本看起来垂直偏离。

我找到的所有答案要么涉及顶部填充的一些随机值（感觉就像一个丑陋的黑客），要么使用不同的字体。是否有正确的方法使文本基于输入元素中的基线垂直对齐，而不管字体如何？

理想情况下，顶部会有一些额外的空间，由浏览器计算而不是预定义的 padding-top 值。

标签： cssfontsgoogle-fonts