html5 - 在移動端設置font-size小于12px。line-height的問題

問題描述

正如標題所說，比如我在一個標簽內設置font-size：10px，那么他的line-height就默認為16px了，在設置line-height：10px是不生效的，設置line-height大于12px的時候就生效了，ios上沒問題，這是什么情況啊。。。有解決辦法沒

問題解答

當樣式表里font-size<12px時，chrome瀏覽器里字體顯示仍為12px，這時可以用 html{-webkit-text-size-adjust:none;}

chrome之前是不支持12px以下的中文的，因為覺得中文小于12px識別難度太大了，在移動端就我的開發經驗來看

當設置小于12px的字體時，ios沒問題，但是安卓會有問題，即便是用了-webkit-text-size-adjust也不行，因為有的安卓瀏覽器不支持這個特性

如果真的需要有小于12px的字的話，建議用scale來做，這樣可以保證各個端的一致性

1、當樣式表里font-size<12px時，中文版chrome瀏覽器里字體顯示仍為12px，這時可以用

html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上會導致頁面縮放失效3、body會繼承定義在html的樣式4、用-webkit-text-size-adjust不要定義成可繼承的或全局的

然而只對chrome27.0 版本以下有效，27.0以上版本無效；只對英文才有效，對中文無效。在新版的chrome中，已經禁止了改屬性,建議使用CSS3中的方法:

transform:scale(0.875);

當使用transform:scale(0.875)時; 不僅是文字變小了，整個文字所在的容器也同時會變小。