css 讓chrome支持小於12px的文字

問題描述:

chrome瀏覽器限制了文字的大小,最小隻能是12px,以前可以使用Chrome的CSS私有屬性-webkit-text-size-adjust:none; (只對英文才有效,對中文無效。)來取消Chrome的字體限制。但是,在chrome更新到27版本之後就刪除了這個屬性。

如圖所示:

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

問題解決

1.利用transform屬性來解決這個問題
在這裏插入圖片描述
在這裏插入圖片描述
但是這裏會發現,雖然字體改變了,但是位置也發生了變化,這是因爲transform:scale()只能對塊元素設置,設置後寬高也會比例縮放,transform屬性影響了寬高,對佈局產生了影響,這裏我們利用translate方法可以改變它的位置
在這裏插入圖片描述
在這裏插入圖片描述