前端問(wèn)題多如牛毛，兼容問(wèn)題更是十占其九依沮，今天我們簡(jiǎn)單說(shuō)說(shuō)Chrome瀏覽器不支持小于12像素的問(wèn)題筋现。
以上圖片從左到右分別是chrome碎捺，safari和firefox瀏覽器，當(dāng)然狰晚，沒(méi)有IE，因?yàn)閙ac上沒(méi)有IE啊缴啡，啊哈哈哈哈哈哈壁晒。可以看出來(lái)只有在chrome上字體小于12px的沒(méi)有生效业栅，這是因?yàn)閏hrome認(rèn)為當(dāng)字體小于12px就會(huì)增加識(shí)別難度秒咐，所以設(shè)置了瀏覽器最小字體為12px。但是在實(shí)際的開(kāi)發(fā)工作中碘裕，難免會(huì)遇到一些需求是需要實(shí)現(xiàn)小于12px的字體的携取，那么怎么解決這些問(wèn)題呢？
1. 避免字體小于12px的需求
當(dāng)然帮孔，這一條建議屬于瞎比比雷滋，但是確實(shí)是需要注意的，在UI設(shè)計(jì)的時(shí)候開(kāi)發(fā)人員應(yīng)該告訴UI設(shè)計(jì)師文兢，盡量不要使用小于12px的字體晤斩，畢竟連chrome都認(rèn)為字體太小，不容易辨識(shí)姆坚，我們要緊跟潮流啊澳泵。這樣你就會(huì)避免這一方面的麻煩。
2. 清除chrome的字體自動(dòng)調(diào)整屬性
可以給頁(yè)面的body元素設(shè)置 -webkit-text-size-adjust:none;兼呵，很不幸的是這種方法在27正式版之后的chrome中已經(jīng)失效兔辅，這里就不展開(kāi)介紹了，因?yàn)榻榻B了也沒(méi)啥用啊萍程，啊哈哈哈哈哈!
3. 使用圖片
當(dāng)然這是我們都不愿意面對(duì)的問(wèn)題幢妄，把文字切成圖片，這樣做無(wú)疑會(huì)增加瀏覽器的請(qǐng)求時(shí)間茫负。這種方法建議在需求量小的情況下使用蕉鸳，比如只有一條10px的提示語(yǔ)啦，只有一個(gè)8像素的單詞啦，這些都是可以接受的潮尝。
4. 縮放
這種方法就比較通用了榕吼，我們使用css3的一個(gè)縮放屬性：transform:scale()，可以寫(xiě)好一個(gè)縮放的類勉失，需要變的字體把類引用進(jìn)去就行了羹蚣，簡(jiǎn)單粗暴可推廣。需要注意的是乱凿，縮放屬性會(huì)把寬高等屬性一并縮放了顽素，因此左邊會(huì)出現(xiàn)空白，此時(shí)用相對(duì)定位徒蟆，寬度設(shè)置等方法解決就好胁出。
