webkit的移动端Font Boosting特性
2018-01-25 本文已影响30人
JoseWoo
image.png
Font Boosting特性？这啥东西哦，一脸懵逼！！！
其实是酱紫的，今天在做一个公众号的页面，出现了一个很奇怪的问题。页面中字体的显示大小，竟然与css中指定的大小不一致。我给设置的24px你给我显示的这个估计连30都不止了吧？
image.png
我去？为嘛会出现这个问题。。。然后我就一阵阵的去排查，好鬼长的一段时间。。。。标签？js？css样式？还是用的库有问题？一个一个都搞了一边之后.......最后发现有一个很奇怪的事，由于我最后一段一段标签排查，结果发现，只要我复制多个标签，然后只要标签里面有文字内容，这问题就马上又重现了，把标签删掉或者文字删除后又恢复正常，而且这个字体只会变大，不会变小，而且是随着根字体的大小而变化。然后就google各种搜，最后发现了这么一个东西。「Font Boosting」。
Font Boosting这东西貌似是webkit给移动端提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。
唔，既然知道问题的所在了，就应该看看怎么解决了，这里是找的一些解决方法：
- 1、手动指定viewport width的值
- 2、由于这个特性是在未指定尺寸的文本流中才有效，那就给这元素指定个宽高，width、heigh；（可是正常来说，这个肯定不是最好的解决办法，在移动端的文本，谁能确切知道这个尺寸，那就是用第三个方法，是比较ok的）
- 3、既然不能给确切的宽高，那还有个指定宽高的方式，max-height。测试了下这个是ok的。那这样的话吧元素的max-height设置一下设置为100%，ok，那问题也就解决了。
然后如果想要更深入的去了解webkit是怎么指定这个字体大小的，可以去自行百度，这就不详细写了。
image.png
