最近正在面試，遇到了很多有趣的東西，比如今天，在面試前先做了一套面試題，其中有這麼一道題，覺得挺有趣，之前也沒見過，就打算記錄下來：
<!-- Chrome瀏覽器12px字體大小以下無法顯示，均顯示為12px，應該怎麼解決。 -->
我確實有點懵，在之前寫代碼的時候，沒有遇到過這樣的情況，不過既然這樣問了，就得想出解決的辦法。
首先我想到之前的一個問題，0.5px 的邊框該如何實現，通過 scale (0.5) 可以實現，這是 CSS3 新屬性。
所以當時我就寫了通過 transform:scale() 可以實現。不過後續在面試的中，面試官也沒有提及這些問題。
回到家之後，吃完飯坐在電腦旁，正準備逛一逛 GitHub ，突然想起來了這麼一個問題，就自己測試了一遍：
<div style="font-size: 13px;">
測試
</div>
<div style="font-size: 12px;">
測試
</div>
<div style="font-size: 11px;">
測試
</div>
竟然真的存在這樣的問題，Chrome 12px 以下的字體無法正常顯示，均顯示為 12px。
然後我用 scale 設置了一下屬性，
<div style="font-size: 13px;">
測試
</div>
<div style="font-size: 12px;">
測試
</div>
<div style="font-size: 11px;transform: scale(0.5);">
測試
</div>
字體確實可以再次縮小到自己想到的程度，但是存在一些弊端，所有帶有長度的屬性均被縮小，比如圖中的 div 的長度，本來默認是 100% ，但是顯示只有原來的一半了。
雖然存在這麼個問題，但是按照我自己的預估，平時我們瀏覽的網站基本沒有低於 12px 大小的字體吧！反正我是沒有遇到過，我估計面試題也是想考驗我們對一些生僻知識的處理吧，不過也不算生僻，前有 0.5px，後有 12px，其實都大同小異。
在遇到這個問題的時候，確實可以通過 scale() 處理一下，然後在認真設置其他屬性，盡量避免更多的弊端。