Question

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

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

在img上：1）comfortaa 2）roboto 3）Segoe UI（带有按钮，h1带有边框）

如何使带有Comfortaa字体的元素文本与其他元素相同？最好在布尔玛。谢谢。

Answer 1

您可以在文本容器中添加额外的填充以将其向下压一点。您需要调整填充量以适合。下面是一个如何工作的示例。我创建了一个类.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具有不同的字体系列和行高

1 个答案: