coder.png

在這一年的工作中，我發(fā)現(xiàn)很多問題你利用自己的「聰明才智」繞過去了，總有一天它會和你不期而遇，今天我們就來直面一個字體兼容性的小問題：Chrome谷歌瀏覽器下不支持css字體小于12px。

我們先來看個效果圖(chrome下)：

給你看個栗子.png

從上面的圖可以很明顯地看出Chrome下css設置字體大小為12px及以下時，顯示的都是一樣大小，都是默認12px；

那么網(wǎng)上有一個方法就是給當前樣式添加Chrome私有屬性：-webkit-text-size-adjust:none;

可是我進行驗證后發(fā)現(xiàn)并無效果。后來查資料了解到在Chrome 27之后就取消了對這個屬性的支持，那么我們應該如何設置Chrome下的字體呢？

.small-font{

font-size: 12px;

-webkit-transform: scale(0.5);

}

這樣在元素上加上這個屬性就OK了，但是只這樣寫可不會兼容IE、FF哦，所以再給一個兼容性寫法：

.small-font{

font-size: 12px;

-webkit-transform: scale(0.5);

}

.smallsize-font{

font-size: 6px;

}

溫馨提示

這時候有同學說你這不對啊，我加了這樣式就沒效果，別急哈，仔細看下你的元素是不是行內元素啊？

注意:transform:scale()這個屬性只可以縮放可以定義寬高的元素，而行內元素是沒有寬高的，我們可以加上一個display:inline-block;屬性就好啦。

PS:有小伙伴讓用rem解決，我在這里解釋一下哈，em、rem是一種相對單位，根據(jù)根元素的大小計算出來，目的是瀏覽器的字體大小變化時，頁面布局及字體大小能跟著自適應。也就是說反應到瀏覽器要渲染是還是xx px，那Chrome瀏覽器本身是渲染不了12px以下的字體的，所以這個方法是不可行的，rem雖好，但不對這個癥。

給我點贊的都是小可愛 ^_^

總結

以上是生活随笔為你收集整理的HTML字体小于12谷歌不兼容,Chrome谷歌浏览器下不支持css字体小于12px的解决办法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。