相关疑难解决方法(0)

我的网页上有一个徽标/主页按钮，这是我的项目的缩写（我使用的临时字母是ABCDEF）。我使用Arial作为字体（尽管以后可能会更改）。从徽标的照片可以看出，字母之间并没有完全对齐。

我已经尝试过font-kerning: none;这样做，但不能完全使它完成我想做的事情。

我为该示例制作了一个jsfiddle，这是链接：https ://jsfiddle.net/7dfetxto/

否则，这是我的代码（与jsfiddle中的代码相同）：

的HTML

<div id="logo">
  <a href="#">
    <h1>ABC</br>DEF</h1>
  </a>
</div>

的CSS

#logo{
  font-family: "arial", "times", "sans-serif";
  width: 128px;
  height: 100%;
  background-color: #336699;
  float: left;
}
#logo a{
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
}
#logo h1{
  margin: 0px;
  padding: 26px 30px;
  text-align: center;
  text-transform: uppercase;
  font-kerning: none;
  display: block;
  color: white;
}

我的目标是使第二行的字母直接位于第一行的相应字母之下。

谢谢。