chrome瀏覽器font-size<12px無效解決辦法


當樣式設定font-size<12px時,chrome瀏覽器里字體顯示仍為12px;
如font-size:11px; 但是chrome還是12px的大小,很不聽話。

今天我就遇到了這樣的問題?
網站產品分類塊字體在IE9和FF下顯示不正常,比預想的要小,在IE7\IE8\360\chrome里顯示正常,我查了些資料就是沒找到原因,問了網友才得到解決辦法。

-webkit-text-size-adjust

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;之后,不然效果不顯示 。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM