移动端小于12px 字体解决方案

随着h5 的兴起，设计的五花八门，页面存在许多小号字体。但移动端对小于12px的支持度不一，详见下面测试。

https://www.cnblogs.com/he-lian/p/4512276.html?_t_t_t=0.47901571358823203

  那么我们如何在特定区域展示小号字体呢。首先想到的方案就是缩放，使用 transform: scale(0.5)，使用transform确实可以缩小。但是transform缩放也存在问题。  1，scale会整体缩放，这样会造成块级元素也缩小，造成比例不协调。2，缩放默认以中心点缩放，缩放后整体剧中，造成ui不协调。

   针对以上问题，我们相应解决，1，scale整体缩放，我们扩展缩放元素的宽度，扩展比例为缩放的倒数。2，调整缩放中心点为左上角点。这样缩放后的从ui上来看就是只缩放了字体。

  这样也会存在问题，在有定位的时候，扩展比例也同样会占据空间，造成页面超出。此时我们需要给父级元素添加 超出隐藏即可。

  下面为案例代码，感兴趣的可以自己试试。

  



 

	
这里是title，14号字体。
	
这里继承了14号字体，使用缩放进行缩放了一半，相当于7号字体了。那么字体呈现出来的大小是多少呢，我们拭目以待，那么字体呈现出来的大小是多少呢，我们拭目以待，那么字体呈现出来的大小是多少呢，我们拭目以待