利用CSS設定小於12px的文字 解決常用瀏覽器字型大小
阿新 • • 發佈：2018-12-29
谷歌瀏覽器Chrome是Webkit的核心，之前，有一個 -webkit-text-size-adjust 的私有 CSS 屬性，通過它即可實現字型大小不隨終端裝置或瀏覽器影響。
CSS程式碼定義如下：
-webkit-text-size-adjust:none;
但是，在現在最新版的谷歌裡，已經不在支援這個屬性啦。
所以css又出了新的屬性：transform:scale()
<body><p>我是一個小於12PX的字型</p></body>
定義一個樣式
body,p{ margin:0; padding:0}
p{font-size:10px;}
放在瀏覽器預覽，會發現最新版谷歌已經不在支援，還是12畫素
所以我們就要用到了，下面屬性
-webkit-transform:scale(0.8); //0.8位縮放倍數，具體自己根據實際需求修改
修改後樣式為
body,p{ margin:0; padding:0}
p{font-size:10px;-webkit-transform:scale(0.8);}
但是，這個屬性會把整個p的屬性都縮放。
如果有背景、邊框、都會被縮小！
所以我們需要修改結構為
<p><span>我是一個小於12PX的字型</span></p>
定義樣式為
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);}
改了之後，還是不可以的。
原因 -webkit-transform:scale(0.8); 只能縮放可以定義寬高的元素，而span是行內元素，不可以
所以我們修改為
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}
為什麼定義 display:inline-block 而不是 display:block？
轉為block就獨佔一行啦！如果我後面還有其他元素就會受到影響，所以需要轉換為 inline-block
現在放到谷歌瀏覽器裡，就會發現支援字型變小啦
但是還會存在一定的邊距，貌似margin或者padding的間距，這就是縮放存在問題，原來的位置還佔有12px字型的大小。
所以，還要對應修改margin了，定義為負的即可