html5 移动端字体问题,踩坑之移动端显示字体大小问题

踩到的第一个坑：

最近做一个移动端的h5，一开始拿到设计稿后，发现有几个区域字体换算之后在iphone6上是小于12px的，就有一个问题了，谷歌对小于12px的字体，是不做处理的。按理说，设计上应该要避免类似情况，之前做了很多的页面，还没有小字号的存在，所以准备自己先找找解决办法，不行的话，再沟通一下。

查找发现网上基本都是需要使用· transform:scale()来解决，并配合 transform-origin:top center.但是此类方法在缩小字体的同时，容器也会被缩小(例如div宽为200px，想要显示字号为8px,假如当前字体大小为16px，则需要缩放0.5，缩放完后发现div宽也缩小了，变成100px，但是我们不想要这样的效果，所以用此方法时，当scale值为x时，需要先将容器大小先缩放1/x，然后再使用transform:scale(x))，这样的做法比较繁琐，如果页面内容不多，可以使用。

如果内容是固定的，也可以使用图片来加载。

踩到的第二个坑：

web使用手机模拟器显示的字号和在手机上打开的不一致。本来高高兴兴的在模拟器上显示完美，但是一用手机打开，字号变的很大[同样的字号有的地方可以正确显示，有的却不能]。这下有点头大了，之前没遇到过。

(内心： 觉得不可思议... 有点过分....)

有的说这是Chromium内核提高移动端文本可读性的一个特性，叫做这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」。当文本数量太多，计算机认为在屏幕上显示这么多文本会导致用户不能清晰阅读时，他会自动设置font-size的大小，这个时候得到不同的字体大小的效果，

[移动端浏览器这样做真的好吗？？？]

解决办法：

给*设置 -webkit-text-size-adjust: none;

这个方法对我的问题有效果