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 代码。
问题字体 好字体

4

2 回答 2

0

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

于 2013-04-24T22:56:55.043 回答
0

人们的反应都没有真正对我的情况有所帮助。我这样做遇到这么多麻烦的主要原因是因为我想完全控制半透明背景的宽度和高度。出于美学原因，我不希望背景成为标题的宽度。这是我的最终结果：

HTML

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

CSS

h1风格

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;
}
于 2013-04-25T01:30:49.420 回答