我们正在建立一个新网站并希望使用一些网络字体（托管在 fonts.google.com 上）。我们过去已经这样做了，并且没有遇到问题（当时使用 OpenSans）。这次我们选择了不同的字体（https://fonts.google.com/specimen/Josefin+Sans）。
但是当我使用该字体时，与使用系统字体或无衬线字体或基本上任何其他字体相比，文本似乎没有对齐。感觉字体在其文本框中是顶部对齐的。
通过将 div 的 line-height 设置为其高度，它应该在 div 内垂直居中。
我在想象事情吗？如果没有，有没有办法解决这个问题？通过一些 css-magic 或通过编辑字体（虽然我不知道如何做到这一点）。
我创建了一个codepen，通过从我们的网站复制相关样式来说明我的问题： https ://codepen.io/w00dy73/pen/mdewMNz
font-family: 'Josefin Sans', sans-serif;
（Stackoverflow 告诉我将代码放在 codepen 链接旁边，但我不确定正确的代码是什么）
根据要求，这是我的屏幕截图（Mac 上的 Firefox）：
黑线代表 div 的垂直中心，将图标切成两半。在顶部 div 中，文本不是一半，它有点头重脚轻。在底部 div 中，文本完全居中。蓝色框是文本框的轮廓，虚线是 Firefox 在我检查元素时在开发控制台中显示的内容。顶部 div 的文本框与图像不对齐（与顶部有 1-2px 的轻微偏移），底部工作正常。