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

Question

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

例如，如果你点击link并检查文本示例，你可以清楚地看到g、p、q等字母都“将整个文本向上推”，结果是文本输入元素内部看起来垂直关闭。

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

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

Answer 1

最近 CSS 中为此目的引入了新的 font-face descriptor 属性。它们允许 CSS 覆盖字体文件本身中包含的一些信息。

在字体的 @font-face 描述中（由 Google 字体网站上提供给您的 <link> 加载的字体），您现在可以添加：

在你的情况下，你可以使用 descent-override 属性完全取消任何类型的下降，然后使用 line-gap-override 仍然有一些 space 2 行（尽管没有任何后代）。

在下面的例子中，我定义了两次Source Serif字体。名为 'Source Serif Pro' 的字体只是从 Google 字体 CSS 复制而来，名为 'Source Serif Pro With Override' 的字体除了我提议的 2 个额外的 font-face 描述符外是相同的:

@font-face {
  font-family: 'Source Serif Pro With Override';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v15/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oAGIyY0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  descent-override: 0%;
  line-gap-override: 35%;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v15/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oAGIyY0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  display: flex;
  gap: 20px;
}

div {
  max-width: 300px;
}

.override {
  font-family: 'Source Serif Pro With Override';
}

.regular {
  font-family: 'Source Serif Pro';
}

p {
  box-shadow: inset 0 0 0 1px red;
}

<div class="regular">
  <button>Ipsum</button>
  <p>Fusce pharetra cubilia facilisis litora eros maecenas tellus aliquet senectus, pulvinar diam ligula condimentum curae potenti tempus nostra nibh, feugiat aptent morbi amet sociis lobortis auctor porttitor.</p>
</div>
<div class="override">
  <button>Ipsum</button>
  <p>Fusce pharetra cubilia facilisis litora eros maecenas tellus aliquet senectus, pulvinar diam ligula condimentum curae potenti tempus nostra nibh, feugiat aptent morbi amet sociis lobortis auctor porttitor.</p>
</div>

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

Problems vertically centering text inside input element with some fonts

css

fonts

google-fonts