html - CSS - 使无衬线字体模仿等宽字体

Question

我的网页有一个 Logo /主页按钮，它是我的元素的缩写(我使用的临时字母是 ABCDEF)。我使用 Arial 作为字体(尽管以后可能会更改)。正如您从 Logo 照片中看到的那样，字母并没有完全对齐。

我试过 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>

You might find this interesting: kerningjs

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

字体大小

通过使第二行(在本例中)的font-size 变大，它将变大并到达第一行的两侧:JSFiddle .