如何使用Sans-serif字体进行完美的文本对齐？

Question

我正在这个页面上工作：

如你所见，＆＃34; BE＆＃34;略微不与＆＃34; WITH＆＃34;在左边（在更宽的屏幕上更明显）。 headline，head1或head2上没有填充或边距。并且跨度中的所有内容都是text-align:left。我使用的是fittext.js，但我甚至尝试使用整数作为字体大小。字体只是一个基本字体：font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

涉及的代码：

<div class="headline">
    <span class="head1" style="font-size: 84.7058823529412px;">be important</span>
    <span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span>
</div>

涉及CSS

.slide .headline {
  text-transform: uppercase;
  width: 100%;
}
.important_slide .headline span {
  text-align: left;
}
.slide .headline span {
  width: 100%;
  display: block;
  color: white;
  line-height: 0.8;
}
.important_slide .headline .head2 {
  margin-top: 18px;
}

Answer 1

您正在看到有关字体设计方式的工件。

例如，如果您使用衬线字体，则＆＃34; b＆＃34;上的左上角衬线与span的左边缘对齐，＆＃34; w＆＃34;的左边缘也是如此。

但是，如果您使用sans-serif字体，那么＆＃34; b＆＃34;没有衬线，并且从span的左边缘略微偏离。

除了选择一个字体系列，其中所有字符都与字形框的左边缘对齐外，没有解决方法。

＆＃13;

＆＃13;

span {
  display: block;
  border: 1px dotted gray;
}
.ex1 {
    font-family: serif;
}
.ex2 {
    font-family: sans-serif;
}
b {
  display: inline-block;
  font-family: monospace;
  margin-top: 10px;
}

＆＃13;

<div class="headline ex1">
  <b>Ex1:</b>
    <span class="head1" style="font-size: 84.7058823529412px;">be important</span>
    <span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span>
</div>
<div class="headline ex2">
  <b>Ex2:</b>
    <span class="head1" style="font-size: 84.7058823529412px;">be important</span>
    <span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在第一个跨度后添加一个break标记。

<div class="headline">
<span class="head1" style="font-size: 84.7058823529412px;">be important</span><br />
<span class="head2" style="font-size: 28.8px;">with a 1:19 professor to student ratio</span>