如何消除字体导致的文本下方空白并实现垂直居中？

问题说明 #

我原本以为该问题与line-height、padding、margins、display等属性或父元素有关，但实际是字体本身造成了文本下方的空白！

有没有办法消除或调整这个空白？我真正希望实现的是让文本垂直居中。正如下图所示，特殊字体的文本并未对齐到容器中间位置。

示例代码 #

CSS #

:root {
  --accent: #db1959;
  --accent-2: #8eb2a6;
  --accent-4: #f4fbfe;
  --accent-5: rgba(210, 215, 198, 0.2);
  --hb-pink: #db1959;
}

body {
  background-color: var(--hb-pink);
}

a {
  text-transform: none;
  font-size: 18px;
  line-height: 1.5;
  word-wrap: break-word;
  box-sizing: inherit;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border-radius: 15px;
  display: inline-flex;
  font-weight: 700;
  transition: all 0.5s ease;
  background-color: var(--accent-4);
  color: var(--accent);
}

#fancy-font {
  font-family: Noto Sans Javanese, sans-serif;
}

HTML #

<a id="fancy-font" href="#">Give us a shout!</a>

<a id="simple-font" href="#">Give us a shout!</a>

解决方案 #

针对字体自带的内置空白问题，有几种实用的解决方式：

• 精准调整line-height：由于容器使用了inline-flex，可以尝试将特殊字体的line-height调低，比如设为1.2，根据实际显示效果逐步微调，直到文本垂直居中。
• 使用CSS字体度量属性：现代浏览器支持直接修改字体的内置度量参数，通过ascent-override、descent-override、line-gap-override压缩字体自带的空白：

  #fancy-font {
    font-family: Noto Sans Javanese, sans-serif;
    ascent-override: 90%;
    descent-override: 10%;
    line-gap-override: 0%;
  }
  

  可根据实际显示调整百分比数值，适配不同字体的度量规则。
• transform微调偏移：如果上述方法效果不佳，可直接用translateY进行像素级偏移：

  #fancy-font {
    font-family: Noto Sans Javanese, sans-serif;
    transform: translateY(-2px);
  }
  

  根据文本偏移的实际情况调整像素值，快速实现居中效果。

内容的提问来源于stack exchange，提问作者John