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

【问题标题】：CSS Bulma with different font-family and line-height具有不同字体系列和行高的 CSS Bulma
【发布时间】：2019-04-12 20:17:17
【问题描述】：

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

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

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

see comparision img

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

【问题讨论】：

您不能调整字体大小，使其与其他 2 种字体的大小相匹配吗？那不行吗？
不，这样不行。
更多信息请看这里：stackoverflow.com/a/41336508/2562137

标签： css font-family bulma

【解决方案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>

【讨论】：

好的，如果有一些全局解决方案，例如：通过 sass 的所有组件和元素，那就太好了。！无论如何谢谢你。
这是字体的一个怪癖，我不认为有一个全局的方法来解决这个问题。您可以考虑创建margin 和padding 帮助器，而不是使用text-offset 类来在各处轻推元素。布尔玛没有我知道的github.com/jgthms/bulma/issues/451。但是像 Tachyons tachyons.io/docs/layout/spacing 和 Twitter Bootstrap 这样的库有很好的 getbootstrap.com/docs/4.3/utilities/spacing。