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)时; 不仅是文字变小了，整个文字所在的容器也同时会变小。