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

Question

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

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

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

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

Answer 1

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

在@font-face里面您的字体描述(由 Google 字体网站上提供给您的 <link> 加载的内容)，您现在可以添加:

• ascent-override
• descent-override
• line-gap-override

在您的情况下，您可以使用 descent-override属性完全取消任何类型的下降，然后使用 line-gap-override两行之间仍然有一些空间(尽管没有任何下行)。

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

@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>