請解釋這種字體大小結構

Question

我正在看的一個主要網站的CSS有什麼似乎是一種奇怪的方式來管理他們在CSS中的字體大小。首先，身體選擇具有這樣的：

body { 
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif; 
} 

再後來就得到了H2字體自定義尺寸他們這樣做：

h2 { 
font-size:3em; 
} 

如果你更改字體的指令在任何這些地方中， h2的字體大小會改變，看起來不正確。因此，他們有明確的管理通過這些指令的組合，字體大小，我想知道爲什麼他們會這樣去做....

問題：

1. 爲什麼H2字體不簡單地覆蓋身體字體？它就像身體字體在其尺寸上起到乘數的作用...

2. 這個設計的動機是什麼？

感謝， 約拿

Answer 1

爲什麼H2字體不能簡單地壓倒一切的正文字體？這就像身體字體在其大小上起到乘數的作用...

因爲在CSS中，em是一個相對計量單位。因此，對於<h2>元素，基礎尺寸的62.5％的3個ems意味着187.5％的基礎尺寸。

這個設計的動機是什麼？

設置爲body元素的百分比值意味着 - ％是衡量相對單位太 - 用戶可以使用他的瀏覽器的文字大小設置一整頁文本調整。我猜測62.5％的值是因爲瀏覽器的默認字體大小會導致整個主體副本過大（請記住，這是在body元素上應用的）。我的網站使用90％，這不是那麼小，但你明白了。

Answer 2

1em等於默認字體大小。瀏覽器中的默認文字大小爲16px。除非你改變了默認值，那就是。

此處默認值定義爲瀏覽器默認值的62.5％，線高爲1.5。

3em是默認大小設置的3倍。

因此，當您更改主體默認設置時，它會影響使用em尺寸單位的每個位置，包括使用默認設置爲3倍的h2標記。

Answer 3

通常瀏覽器定義了16px的默認字體大小。但是，他是一個相對單位。因此，舉例來說，如果你有一個設置字體大小，將其設置爲62.5％，集裝箱/的

1 em = 1 times 16px = 16px 
1.5 em = 1.5 times 16px = 24px 
2 em = 2 times 16px = 32px 

因此DIV，它減少到您參考字體大小爲10px默認。

這意味着這種技術使得它更容易，當你在可視化的像素字體大小，

1 em = 10px 
1.5em = 15px 
2em = 20px