網頁字體縮放樣式-webkit-text-size-adjust的用法詳解

一、當樣式表裏font-size<12px時,中文版chrome瀏覽器裏字體顯示仍爲12px,這時能夠用 html{-webkit-text-size-adjust:none;}
二、-webkit-text-size-adjust放在body上會致使頁面縮放失效
三、body會繼承定義在html的樣式
四、用-webkit-text-size-adjust不要定義成可繼承的或全局的

蘋果移動設備上會識別,用於保證文字大小。html

寫頁面的應該都知道Chrome瀏覽器默認狀況下的字體最小爲12px,若是你要設置某字體大小爲10px的話,你會在Chrome發現仍是12px。若是要使今生效的話,就得修改Chrome的默認配置了,通常應用下面的代碼就能在全局生效了:web

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

可是這樣設置以後會有一個問題,就是當你放大網頁時,通常狀況下字體也會隨着變大,而設置了以上代碼後,字體只會顯示你當前設置的字體大小,不會隨着網頁放大而變大了,這樣對有須要放大網頁觀看的用戶形成了很差的用戶體驗,因此不建議全局應用該屬性,而是在須要的狀況單獨使用就行了。chrome

在中文版Chrome裏面,網頁CSS裏全部小於12px的字體設置都無效,最終將顯示12px。這樣弄的本意多是好的,由於中文一旦小於12px,就變得不易閱讀。瀏覽器

但中文版Chrome也會閱讀英文網站啊,中文網頁裏面也會有英文的小字體設置需求啊,尤爲是一些文字部份的設計,不小實在很差看,影響整個排版的美觀。字體

解決方案,添加一個私有屬性到html選擇器:網站

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

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

若是要打開縮放功能,則定義下面的全局樣式:設計

1
*{-webkit-text-size-adjust:auto !important;}
相關文章
相關標籤/搜索