文本不具有大字體大小

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

你是對的 - 這是因爲簡單字母的大小。

在大多數字體中，每個字符在其任一側都有少量空白，以將其與相鄰字母分開。沒有這個空間，這些字母就會互相碰撞。在字體大的情況下，這個空間變得相當重要，併產生你所看到的效果。唯一的另一種選擇是查找（或創建）沒有該空間的字體（或者在每個字母后面沒有空格的情況下只有尾部空格）。