CSS Bulma с другим семейством шрифтов и высотой строки - PullRequest
Новая
       27

CSS Bulma с другим семейством шрифтов и высотой строки

0 голосов
/ 12 апреля 2019

Я использую фреймворк Bulma css с пользовательским шрифтом Comfortaa из https://fonts.google.com/specimen/Comfortaa

Но у шрифта есть дополнительное пространство внизу, и весь текст элементов немного выше, чем должен быть.

На img: 1) comfortaa 2) roboto 3) Пользовательский интерфейс Segoe (с кнопкой и h1 с рамкой)

см. Сравнение img

Как сделать текстэлементов со шрифтом Comfortaa на том же уровне, что и другие?Желательно в булме.Спасибо.

1 Ответ

1 голос
/ 13 апреля 2019

Вы можете добавить дополнительные отступы к текстовому контейнеру, чтобы немного опустить его.Вам нужно настроить количество отступов, чтобы удовлетворить.Ниже приведен пример того, как это может работать.Я создал класс .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>
...