前端瀏覽器字體小于12px的解決辦法

前言
最近做項(xiàng)目時(shí)，UI設(shè)計(jì)的字體10px,看效果圖時(shí)發(fā)現(xiàn)字體仍然蠻大，改變12px時(shí)字體還是那么大，改變到14px時(shí)，字體變大了，發(fā)現(xiàn)規(guī)律，才知道原來瀏覽器為了讓用戶字體看的清楚，最小設(shè)置為12px 。怎么辦?設(shè)計(jì)就是10px?
最終實(shí)現(xiàn)的效果圖如下：

效果圖

效果圖
百度時(shí) ，各位網(wǎng)上大神說利用transform: scale(0.5)可以滿足要求，具體使用時(shí)，發(fā)現(xiàn)把整個(gè)div寬高都縮放了，不滿足要求，
反過來想，可以把紅點(diǎn)和字放在兩個(gè)div上，紅點(diǎn)控制寬高，字體上的縮小用transform: scale就可以滿足需求了。
具體實(shí)現(xiàn)代碼如下：

css部分：

上面字體就14*0.8 = 11.2px,可以根據(jù)需求做具體調(diào)整。
只這樣寫可不會(huì)兼容IE、FF哦，所以再給一個(gè)兼容性寫法：

注意:
transform:scale()這個(gè)屬性只可以縮放可以定義寬高的元素，而行內(nèi)元素是沒有寬高的，我們可以加上一個(gè)display:inline-block;
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)經(jīng)驗(yàn)啦網(wǎng)網(wǎng)的支持。
【前端瀏覽器字體小于12px的解決辦法】