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

Question

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

htmlcssfonts

3

我有一个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;
}

我的目标是让第二行的字母直接对齐在它们相应的第一行字母下面。

谢谢。

- 4lackof

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user5306470 · Accepted Answer

letter-spacing

使用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。