html - 字体中心内容区域？

Question

我注意到字体周围的内容区域没有居中。这会导致问题，因为我想将背景应用到页眉，但如果不居中，它看起来真的很难看。如果不在其周围放置另一个 div 包装器，是否有更好的解决方案可以解决此问题？另外，有谁知道为什么某些字体会出现这个问题？

这是我的 CSS 代码。

header h1 { 
    font-family: komika_axisregular;
    font-size: 10em;
    color: #f7f7f8;
    margin: 100px 0 50px 0;
    line-height: 0.7em;
    background-color: rgba(46, 52, 54, 0.5);
}

这里是一个问题字体的例子，然后是一个好的字体的例子。两者都使用完全相同的 CSS 代码。

Answer 1

放置一个<span>标记字体并尝试背景着色，这在不同的浏览器中可能看起来不同，你应该始终构建你的 html 标准，这样事情就不会发生，这是因为字体渲染甚至用于嵌入到你的页面的字体格式的差异。