1. 程式人生 > >瀏覽器字型大小的坑

瀏覽器字型大小的坑

原文出處:https://blog.csdn.net/qq_35415307/article/details/54728879

瀏覽器字型大小有兩個需要注意的地方,有時候會碰到相容性的問題。

第一,是瀏覽器預設的字型大小是16px,所以重置css的時候將字型大小預設改為10px是這樣改的:

html,body {
    font-size: 62.5%;
}

後面設定字型大小rem,em都依據body的字型大小計算比較方便。

第二,瀏覽器可以識別的最小字型也是有偏差的。
比如,谷歌可以識別的最小字型大小是12px,小於12px,依然按照12px顯示。其他瀏覽器雖然會好點,但是儘量控制最小的字型在12px。再小的可以通過字型縮放實現,或圖片等方式。
考慮瀏覽器相容性,可以每次設定字型大小加上line-height,給個固定值,或百分比,控制盒子高度的一致性。