Html 围绕字体的中心内容区？_Html_Css_Fonts

Html 围绕字体的中心内容区？

html css fonts

Html 围绕字体的中心内容区？,html,css,fonts,Html,Css,Fonts,我注意到字体周围的内容区域没有居中。这会导致问题，因为我想对标题应用背景，但如果不居中，它看起来非常难看。如果不在其周围放置另一个div包装器，是否有更好的解决方案可以解决此问题？还有，有人知道为什么某些字体会出现这种问题吗以下是我的CSS代码，以供参考 header h1 { font-family: komika_axisregular; font-size: 10em; color: #f7f7f8; margin: 100px 0 50px 0;

我注意到字体周围的内容区域没有居中。这会导致问题，因为我想对标题应用背景，但如果不居中，它看起来非常难看。如果不在其周围放置另一个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代码。

在字体周围放置一个

标记，并尝试使用背景色，这样在不同的浏览器中看起来可能会有所不同，您应该始终构建html标准，这样就不会发生这种情况，这是因为字体呈现方式的不同，甚至是嵌入页面的字体格式的不同。

人们的回答对我的情况都没有帮助。我之所以这么麻烦，主要是因为我想完全控制半透明背景的宽度和高度。出于审美的原因，我不希望背景成为标题的宽度。这是我的最终结果：

HTML

<body>
    <h1>
        <div id="bg-wrap">
            <div id="name-bg"></div> 
        </div>
        <a href="index.html">BRADLEY TSE</a>
     </h1>
</body>

由于后面是a元素，我需要更改z索引，使其显示在背景之上。这可能不是正确的方法，但是我现在不想再乱弄元素的位置了

h1 a {
    position: relative;
    z-index: 1000;
}

这用于将#name bg元素正确定位在屏幕中央

#bg-wrap {
    position: absolute; 
    right:50%;
}

在我的名字上面覆盖一个半透明的背景

#name-bg {
    position: relative;
    right: -50%;
    height: 110px;
    width: 620px;
    margin-top: 24px;
    background-color: rgba(46, 52, 54, 0.8);
    z-index: 1;
}

在第一幅图中，我们可以看到字体大小大于行高？是这个吗？和。。第二种字体是什么？行距不是问题。我可以使线条高度比字体大很多，但它仍然偏离中心。第二种字体是bebas neue。我会试试这个，让你知道它是怎么回事。

#name-bg {
    position: relative;
    right: -50%;
    height: 110px;
    width: 620px;
    margin-top: 24px;
    background-color: rgba(46, 52, 54, 0.8);
    z-index: 1;
}