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

1-針對谷歌瀏覽器加前綴進行適配

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

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

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

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

1.打開瀏覽器，找到“設置”

2.搜搜“字體”

3.點擊“自定義字體”

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

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

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

最新評論