1. 程式人生 > >chrome瀏覽器font-size

chrome瀏覽器font-size

1、當樣式表裡font-size<12px時,中文版chrome瀏覽器裡字型顯示仍為12px,這時可以用 html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上會導致頁面縮放失效

3、body會繼承定義在html的樣式

4、用-webkit-text-size-adjust不要定義成可繼承的或全域性的

蘋果移動裝置上會識別,用於保證文字大小。

寫頁面的應該都知道Chrome瀏覽器預設情況下的字型最小為12px,如果你要設定某字型大小為10px的話,你會在Chrome發現還是12px。如果要使此生效的話,就得修改Chrome的預設配置了,一般應用下面的程式碼就能在全域性生效了:

html { -webkit-text-size-adjust: none; }

但是這樣設定之後會有一個問題,就是當你放大網頁時,一般情況下字型也會隨著變大,而設定了以上程式碼後,字型只會顯示你當前設定的字型大小,不會隨著網頁放大而變大了,這樣對有需要放大網頁觀看的使用者造成了不好的使用者體驗,所以不建議全域性應用該屬性,而是在需要的情況單獨使用就好了。

 在中文版Chrome裡面,網頁CSS裡所有小於12px的字型設定都無效,最終將顯示12px。這樣弄的本意可能是好的,因為中文一旦小於12px,就變得不易閱讀。

但中文版Chrome也會閱讀英文網站啊!中文網頁裡面也會有英文的小字型設定需求啊!尤其是一些文字部份的設計,不小實在不好看,影響整個排版的美觀。

解決方案,新增一個私有屬性到html選擇器:
html{-webkit-text-size-adjust: none;}

顧名思義, 禁用Webkit核心瀏覽器的文字大小調整功能。
 

注:如果要改變字型大小,font-size:15px;應該寫在 -webkit-text-size-adjust: none;之後,不然效果不顯示