CSS Bulma具有不同的font-family和line-height

Question

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

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

关于img：1）comfortaa 2）roboto 3）Segoe UI（带按钮和带边框的h1）

see comparision img

如何使用Comfortaa字体在与其他字体相同的级别上创建元素文本？最好是布尔玛。谢谢。

Answer 1

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

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

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>