Chrome中最小字體12px限制的解決方法

這篇文章主要介紹了Chrome中最小字體12px限制的解決方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

相信不少做網(wǎng)站的用戶(hù)會(huì)有這樣一個(gè)問(wèn)題，Chrome 默認(rèn)最小字體是12px（最新版英文也有此問(wèn)題），這個(gè)是 Chrome 為了更好顯示中文設(shè)計(jì)的，但是這樣一來(lái)就會(huì)出現(xiàn)某些上標(biāo)、下標(biāo)字體過(guò)大，影響用戶(hù)體驗(yàn)。之前在開(kāi)發(fā)Hybid App的時(shí)候也被它困擾了很久,在百度上查了很久，網(wǎng)上所有的解決方案都驚奇地相似，只有下面兩種：

1-針對(duì)谷歌瀏覽器加前綴進(jìn)行適配

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

給html標(biāo)簽加上下面一個(gè)屬性，然而，當(dāng)我打開(kāi)瀏覽器時(shí)，發(fā)現(xiàn)并沒(méi)什么用，后來(lái)發(fā)現(xiàn)這個(gè)屬性在chrome 27版本以后被廢棄了，可真煩呢！

2-利用css3的transform屬性

<div class=""small-font>這是一段文字</div>

.mini-font{
  font-size: 12px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.90);
}

這種方法是利用了css3的縮放屬性，即：將文字大小整體縮小為原來(lái)的0.9倍，但是有一個(gè)硬傷，他只是縮小了文字的大小，并不能將文字所占的區(qū)域大小縮小，即無(wú)法縮小元素的width和height，這就很難受了

3-最終解決辦法?。。?！從瀏覽器設(shè)置入手

嘗試了前2種方法，我發(fā)現(xiàn)并沒(méi)有用，無(wú)奈我使用了手機(jī)模擬器器進(jìn)行調(diào)試，發(fā)現(xiàn)可以將字體設(shè)置為10px或者更小，于是乎我就在思考是不是谷歌瀏覽器本身限制了最小字體大?。?？？于是乎，我打開(kāi)瀏覽器，開(kāi)始慢慢摸索，終于找到根治的辦法了

1.打開(kāi)瀏覽器，找到“設(shè)置”

2.搜搜“字體”

3.點(diǎn)擊“自定義字體”

4.將“最小字號(hào)”改成10px或者更?。ńㄗh不要小于8px，不利于閱讀）

5.然后，問(wèn)題就解決啦，其實(shí)根本就是谷歌瀏覽器本身對(duì)字體做了最小值限制，因?yàn)楹髞?lái)我用ie和火狐瀏覽器調(diào)試的時(shí)候，字體是可以設(shè)置成10px和8px的，這讓我更加懷疑是谷歌瀏覽器的問(wèn)題，而不是css代碼有問(wèn)題。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Chrome中最小字體12px限制的解決方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!