Мы создаем новый веб-сайт и хотим использовать некоторые веб-шрифты (размещены на fonts.google.com). Мы делали это в прошлом, и у нас не было проблем (тогда использовались OpenSans). На этот раз мы выбрали другой шрифт (https://fonts.google.com/specimen/Josefin+Sans).
Но когда я использую шрифт, похоже, что текст выровнен неправильно по сравнению с использованием системного шрифта или без засечек или в основном любой другой шрифт. Такое ощущение, что шрифт выровнен по верху внутри своего текстового поля.
Он должен быть центрирован по вертикали внутри div, устанавливая высоту строки div в его высоту.
Я воображаю вещи? Если нет, есть ли способ это исправить? Либо некоторыми css -magi c, либо путем редактирования шрифта (хотя я понятия не имею, как это сделать).
Я создал кодовую ручку, чтобы проиллюстрировать мою проблему, скопировав соответствующие стили из наш веб-сайт: https://codepen.io/w00dy73/pen/mdewMNz
font-family: 'Josefin Sans', sans-serif;
(Stackoverflow говорит мне поместить код рядом со ссылкой на кодовый блок, но я не уверен, какой будет правильный код)
По запросу, вот скриншот того, как он выглядит для меня (Firefox на Ма c):
Черная линия представляет вертикальный центр div и разрезает иконку пополам. В верхнем элементе div текст не пополам, он немного перегружен. В нижнем div текст идеально отцентрирован. Синий прямоугольник - это контур текстового поля, а пунктирные линии - то, что Firefox показывает мне в консоли разработчика, когда я проверяю элементы. Текстовое поле верхнего элемента div не выровнено с изображением (небольшое смещение на 1-2 пикселя к верху), а нижняя часть работает нормально.