css3字體縮放樣式-webkit-text-size-adjust的用法詳解(前端小白)

寫頁面的應(yīng)該都知道Chrome瀏覽器默認情況下的字體最小為12px,如果你要設(shè)置某字體大小為10px的話,你會在Chrome發(fā)現(xiàn)還是12px。如果要使此生效的話,就得修改Chrome的默認配置了,一般應(yīng)用下面的代碼就能在全局生效了:

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

但是這樣設(shè)置之后會有一個問題,就是當你放大網(wǎng)頁時,一般情況下字體也會隨著變大,而設(shè)置了以上代碼后,字體只會顯示你當前設(shè)置的字體大小,不會隨著網(wǎng)頁放大而變大了,這樣對有需要放大網(wǎng)頁觀看的用戶造成了不好的用戶體驗,所以不建議全局應(yīng)用該屬性,而是在需要的情況單獨使用就好了。

在中文版Chrome里面,網(wǎng)頁CSS里所有小于12px的字體設(shè)置都無效,最終將顯示12px。這樣弄的本意可能是好的,因為中文一旦小于12px,就變得不易閱讀。

但中文版Chrome也會閱讀英文網(wǎng)站啊,中文網(wǎng)頁里面也會有英文的小字體設(shè)置需求啊,尤其是一些文字部份的設(shè)計,不小實在不好看,影響整個排版的美觀。

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

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

顧名思義, 禁用Webkit內(nèi)核瀏覽器的文字大小調(diào)整功能。

如果要打開縮放功能,則定義下面的全局樣式:

*{-webkit-text-size-adjust:auto !important;}

故-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不要定義成可繼承的或全局的
————————————————
版權(quán)聲明:本文為CSDN博主「juzipchy」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/juzipchy/article/details/71367642

-webkit-transform:scale(0.8)

之前可以設(shè)置一個百分比然后可以在網(wǎng)頁上(pc)顯示小于12px的字體,但后來谷歌新版本已經(jīng)不支持這個屬性了。如果還想實現(xiàn)小于12px的字體,要用-webkit-transform:scale(0.8)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容