Chrome谷歌瀏覽器下不支持css字體小于12px的解決辦法 - xiao-jie－IT工程師數位筆記本

文章出處

先來看下 ie、火狐、谷歌瀏覽器下各個字體顯示情況

ie下：

火狐下：

谷歌下：

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

那么網上一直有一個方法就是給當前樣式添加谷歌私有屬性：-webkit-text-size-adjust:none;

可是我進行驗證后發現，在谷歌現在的新版本里已經無效。那么我們應該如何設置谷歌下的字體呢？

我們可以使用到 css3里的一個屬性：transform:scale()

這個屬性前給-webkit-谷歌前綴，那么就可以控制字體的大小，代碼如下：

<style>

p{font-size:10px;-webkit-transform:scale(0.8);}

/*這里的數字0.8，是縮放比例，可以根據情況變化。*/

</style>

<p>中夢測試10px</p>

如下圖：

但是要注意一點，如果這個<p>元素有背景的話，給這個屬性會使背景也隨著變化，所以，我們可以給<p>標簽里再套個<span>

1 <style>
2 p span{font-size:10px;-webkit-transform:scale(0.8);}
3 </style>
4 
5 <p><span>中夢測試10px</span></p>

你會發現沒有效果，如圖：

這是因為transform:scale()這個屬性只為可以縮放可以定義寬高的元素，而span是行內元素；

我們可以給span元素定義一個display:block,這樣就可以了。

1 <style>
2 p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
3 </style>
4 
5 <p><span>中夢測試10px</span></p>

這樣在谷歌瀏覽器下走一遍，字體就能更改了。

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本