具有不同字体系列和行高的 CSS Bulma

Question

我正在使用 Bulma css 框架和来自 https://fonts.google.com/specimen/Comfortaa 的自定义字体 Comfortaa

但是字体在底部有一些额外的空间，它使得元素的所有文本都比它应该的高一点。

在 img 上:1) comfortaa 2) roboto 3) Segoe UI(带按钮和带边框的 h1)

see comparision img

如何使带有 Comfortaa 字体的元素文本与其他元素处于同一级别？ 最好在 bool 玛。谢谢。

Answer 1

您可以向文本容器添加额外的填充以将其向下推一点。您需要调整填充量以适应。下面是一个如何工作的例子。我创建了一个 .text-offset 类，它使用 padding-top 将文本向下推 1px。

您在图像中勾勒出的空白是字体行高，它因字体而异。显然，出于这个原因，一些网络字体试图平衡顶部和底部的间距。

body {
  font-family: 'Comfortaa', cursive;
  padding: 20px;
}

.text-offset {
  padding-top: 1px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<a class="button is-primary">
  <span class="icon is-small">
    <i class="fab fa-github"></i>
  </span>
  <span class="text-offset">GitHub</span>
</a>