Chrome如何設置10px字體

一、不同瀏覽器的字體限制

平台	瀏覽器	默認最小字體	最小字體限制
Mac	Chrome	12px	6px
Mac	Safari	0px	no
Mac	Firefox	0px	no
Win	Chrome	12px	6px
Win	IE11	0px	no
Win	Edge	0px	no
Win	Firefox	0px	no
Mobile	Webkit	12px	12px

【注】雖然谷歌瀏覽器可以通過手動修改設置最小到6px，但是對於普通用戶來說並不會進行設置。所以要通過其他的手段實現10px

二、PC瀏覽器制作10px的字體

.font10px {
    font-size: 12px;
    transform : scale(.833);
    /*transform-origin:left center*/
    *font-size: 10px;
  	/*
  	也可以將20px縮放一半
  	font-size:20px;
         transform : scale(.5);
         *font-size : 10px;
  	*/
}

我們要根據文本的位置設置縮放中心：

如果文本是居中的，那么不需要設置縮放中心。

如果文本是左對齊的，那么就需要設置縮放中心為文本左邊。

*font-size:10px是兼容低版本IE【由於低版本ie不支持transform，所以該類對低版本IE來說就相當於只設置了兩個字號。】

三、移動端瀏覽器制作10px字體

由於 Mobile 端絕大多數瀏覽器采用的是 Webkit 內核，我們只需要設置-webkit-text-size-adjust: 100%;，這樣一來就可以在 Webkit 瀏覽器中設置任意大小的字了。

四、其他方式

• 圖片
• 自制字體
• SVG

---

新人淺見，敬請指摘