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

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

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

給html標(biāo)簽加上下面一個(gè)屬性，然而，當(dāng)我打開瀏覽器時(shí)，發(fā)現(xiàn)并沒什么用，后來發(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的縮放屬性，即：將文字大小整體縮小為原來的0.9倍，但是有一個(gè)硬傷，他只是縮小了文字的大小，并不能將文字所占的區(qū)域大小縮小，即無法縮小元素的width和height，這就很難受了

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

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

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

2.搜搜“字體”

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

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

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

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

最新評論