html - 字体“底部填充”比预期的大

Question

我最近Proxima Nova为我的项目购买了字体，但在垂直对齐时遇到了问题。如果我完全按照 with 设置所有边距、行高和填充Arial，我不会得到相同的结果并且字体未对齐。您可以看到Arial很好地居中并且Proxima nova' 的底部填充大于顶部填充。

我想这是字体的问题 - 问题是 - 我该如何克服这个问题？我必须重做字体吗？我可以设置一些 CSS 属性来解决这个问题吗？

我创建了一个页面来演示该问题：

http://fonts.knyt.tl/

编辑：

我的问题是 - 有没有办法全局“配置字体”以获得正确的填充，这样一旦我决定更改字体就不必重写整个 css 代码？还是我必须编辑字体文件才能实现这一点？

Answer 1

我认为，它的问题与font. 您使用的字体，即；'proximanova' 在它的底部需要一点填充。要么，你应该调整你的填充为

padding: 10px 10px 8px 10px;

或更改使用的“字体”文件。

希望能帮助到你。

Answer 2

这里看起来不错。不知道有什么问题，但请检查某些附加组件或扩展是否会在字体外观上造成问题。

当然，用padding属性调整字体不是一个好习惯，所以最好避免它。

Answer 3

我的猜测是字体的 line-height 适应了descender。尝试添加 ay 或小写 j 并查看它是否下降到基线以下。