文本未与大字体对齐

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

codepen中的示例

Answer 1

字体中的每个字形都位于边界框内.字形通常不会难以抵挡该框的任何边缘,并且每个字形(或字母)周围将具有不同的空间量,以在与其他字形组合形成单词时帮助自然空间.

请查看http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html,了解一些类型设计的复杂性.

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