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

我注意到我的字体周围的内容区域未居中。这是造成的问题，因为我想应用背景的标题，但它看起来真的很难看，当不居中。没有放置另一个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

来源

2013-04-24 btse

在第一张图中，我们可以看到字体大小大于行高？是这个吗？而且......第二个字体家族是什么？ – 2013-04-24 22:56:46

行高不是问题。我可以使行高比字体大得多，但它仍然偏离中心。第二种字体是bebas neue。 – btse 2013-04-24 23:03:09

没有人的反应真的帮助我的情况。我之所以经历这么多麻烦，主要是因为我想完全控制半透明背景的宽度和高度。出于美学原因，我不希望背景是标题的宽度。这是我最后的结果：

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

由于一个元素来了以后，我需要改变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; 
}

来源

2013-04-25 01:30:49 btse

周围放置字体的<span>代码并重背景色彩的是，这可能会有所不同在不同的浏览器，你总是应该构造你的HTML标准所以这个事情不要发生，其原因在字体呈现差异甚至用于嵌入到页面的字体格式。

来源

2013-04-24 22:56:55 Sohail

我要试试这个，让你知道它是怎么回事。 – btse 2013-04-24 23:04:44

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

回答

相关问题