奇怪，但很明顯，具體的字體大小使用EMS

時，我已經注意到，使用EMS的字體一般都有奇怪，但很明顯，具體的數字，例如網站：在一個受歡迎的復位CSS - normalize.css我發現有H3爲1.17em，h4爲1.33em，h5爲1.67em，這是爲什麼？有計算器或我應該用來計算每種字體大小的東西嗎？奇怪，但很明顯，具體的字體大小使用EMS

我一直在調整字體大小以EMS爲標題，P，字幕等，但沒有計算器或任何東西，我只是讓它變大或變小，直到我認爲它看起來不錯。換句話說，我的網站的字體大小爲0.7em，0.9em，1em，1.1em等，甚至是4em（我喜歡大h1）。

這是不好的？在使用ems字體大小時，我忽略了一個重要的事實嗎？

來源

2013-02-05 user1945912

如你所知，em單位字體大小允許文本元素的大小，以保持它們的比例相對於其他文本元素。

有一種可縮放文本的方法，其中在HTML或BODY元素上設置了「基線」字體大小。我通常將此「基準」字體大小設置爲10px，因爲它是一個很好的整數，並且使整個網站的ems更容易計算。在我的設計中說一個標題是15px。我將該標題設置爲1.5em（1.5 x 10px = 15px）。由於這種計算，您可能會注意到看似奇怪的值。

「分數」值也可能看起來不正常。例如，「1.33em」基本上是「1em」，「1.67em」基本上是「1em」。這些字體大小分別比基線大三分之一和三分之二。

如果你正在設計的即時（沒有設計樣稿），你可能沒事只是調整，直到它看起來正確的。通過更改瀏覽器的縮放和/或字體大小默認值來測試事情總是一個好主意，以查看頁面的反應情況。

來源

2013-02-05 01:28:46 showdev

Showdev做什麼，告訴EMS這樣做，但是可以回答有關爲什麼你看到的東西設置這樣的問題的一個好工作。

本文很好地解釋瞭如何在所有瀏覽器中實現一致的文本大小。這個問題是IE7中的14px與Firefox中的14px不一樣。 Ems給出了更一致的結果。 http://alistapart.com/article/howtosizetextincss

而且，只是爲了給擴大解釋。 Ems與父元素的字體大小有關。所以，如果我有：

body { 
    font-size: 14px; 
} 
p { 
    font-size: 1em; /* 14px */ 
} 
h2 { 
    font-size: 1.5em; /* 21px */ 
} 
#myDiv { 
    font-size: 16px; 
} 
#myDiv h1 { 
    font-size: 2em; /* 32px */ 
}

來源

2013-02-05 01:42:11

感謝擴大，Jon Jaques – showdev

奇怪，但很明顯，具體的字體大小使用EMS

回答

相關問題