相信不少做網(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)題。

到此這篇關(guān)于Chrome的最小字體12px限制最終解決辦法的文章就介紹到這了,更多相關(guān)Chrome最小字體內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論