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

Question

我的网页有一个logo / home按钮，这是我项目的缩写（我使用的临时字母是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 {% if produto.principal == 1 %} //render select option {% else %} //render checkbox {% endif %} 属性。

JSfiddle

letter-spacing

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

  

您可能会觉得这很有趣：kerningjs

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

字体大小

通过使第二行的<div id="logo"> <a href="#"> <h1>ABC<br><span class="h1b">DEF</span></h1> </a> </div>（在这种情况下）更大，它将增长并到达第一行的两边：JSFiddle。