CSS-使sans-serif字体模仿等宽字体

Question

我的网页上有一个徽标/主页按钮，这是我的项目的缩写（我使用的临时字母是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;
}

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

谢谢。

Answer 1

字母间距

使用CSS letter-spacing属性。

JSfiddle。

#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;
}
.h1b {
  letter-spacing: 3.25px;
}

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

您可能会发现以下有趣的内容：kerningjs

还有更多可能的方法。一个是

字体大小

通过font-size增大第二行（在本例中）的，它将增长并到达第一行的两侧：JSFiddle。