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

Question

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

的自定义字体 Comfortaa

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

在 img 上：1) comfortaa 2) roboto 3) Segoe UI（带按钮和带边框的 h1）

see comparision img

如何将带有Comfortaa字体的元素文本制作成与其他元素同级的文本？最好在布尔玛。谢谢。

Answer 1

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

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

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>

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

CSS Bulma with different font-family and line-height

css

font-family

bulma