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代码 Problem font Good Font

Answer 1

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

Answer 2

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

<强> HTML

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

<强> CSS

h1 style

header h1 {
    font-family: bebas_neueregular;
    font-size: 16em;
    color: #ffb477;
    margin: 110px 0 40px 0;
}

由于a元素之后，我需要更改z-index以使其显示在背景之上。这可能不是正确的方法，但我现在不想再讨论元素的定位了。

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;
}

中心内容区域周围的字体？

2 个答案: