文本与大字体不对齐

Question

我在 HTMl/CSS 中构建一个元素周期表，我无法让大 .element-symbol 中的文本与 .atomic-weight、.element-name 和 .atomic-symbol 左对齐，而没有任意 text-indent。我想这只是与字母的宽度有关，但是有没有办法让.element-symbol 中的第一个字母从左边开始？即反对红色边框

标记：

<div class="cell">
  <div class="atomic-number"><span>2</span></div>
  <div class="element-symbol">      
    <abbr>He</abbr>
  </div>
  <div class="element-name"><span>Helium</span></div>
  <div class="atomic-weight">4.002602</div>
  </div>

CSS：（红色边框显示对齐问题）

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
  }

.cell {
  border: 1px solid black;
  font-family: sans-serif;
  width: 280px;
  height: 280px;
  margin: 20px auto;
  padding:10px;
  background-color: #4DBCE9;
  }

.element-symbol {
 font-size: 173px;
 border: 1px solid red;
 font-weight: 400;
 /*text-indent: -12px;  dont want to use this*/
 }

.atomic-number, .atomic-weight, .element-name {
 font-size: 25px;
 border: 1px solid red;
 }

Example in codepen

Answer 1

字体中的每个字形都位于一个边界框内。字形通常不会硬靠在该框的任何边缘上，并且每个字形（或字母）周围都会有不同数量的空间，以帮助在与其他字形组合形成单词时自然地间隔。

查看http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html，了解字体设计的一些复杂之处。

我不知道 CSS 中的任何文本或字体属性可以消除该空间，并且在任何情况下，每个字形的空间都会不同，并且不同字体的相同字形之间的空间也会不同。

Answer 2

你是对的 - 这只是因为字母的大小。

在大多数字体中，每个字符的两侧都有少量空格，以将其与相邻的字母分开。如果没有这个空间，这些字母就会相互碰撞。在大字体下，这个空间变得相当重要，并产生您所看到的效果。唯一的其他选择是查找（或创建）没有该空格的字体（或者每个字母后可能只有尾随空格并且没有前导空格）。