css字体大小兼容性问题

css字体大小兼容性问题

记录一个在开发过程中遇到的问题，项目数据可视化大屏界面，使用的是rem布局，在完成时发现在ie浏览器和火狐浏览器字体显示正常，谷歌浏览器字体偏大并且换行，后来发现是使用rem换算成px时字体小于12px,在谷歌浏览器中最小字体为12px导致的。

解决方法：将内容用span包裹，将字体设置为一个大于12px的rem值,然后再用transform:scale()解决

 /* 兼容谷歌最小字体12px */
    font-size: .25rem;
    white-space: nowrap;//强制不换行
    transform: scale(.8);//注意元素需要为块级元素
    display:inline-block;