文本不具有大字体大小

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

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

在大多数字体中，每个字符在其任一侧都有少量空白，以将其与相邻字母分开。没有这个空间，这些字母就会互相碰撞。在字体大的情况下，这个空间变得相当重要，并产生你所看到的效果。唯一的另一种选择是查找（或创建）没有该空间的字体（或者在每个字母后面没有空格的情况下只有尾部空格）。