一般我们在样式初始化的时候，会针对字体设置一系列的操作，这些操作可能会影响布局，也可能会影响元素本身的宽高。
1、设置转化像素 px 为 rem,这样在设备宽度不定的时候，可以响应式的变化，这里的方案选择的是较为成熟的： postcss-pxtorem(postcss.config.js中引入) + amfe-flexible(main.js 中引入)
- 引入插件时，通过document.documentElement.clientWidth，获取设备的宽度，因为我们公司的设计稿一般以 375 为标准，而 amfe-flexible 是将页面整体除以 10，给html设置的 font-size
- 为了配合插件，我们将设置 postcss-pxtorem 中的 rootValue 值为37.5，这样html的基础font-size被设置为 37.5px，就可以吻合起来，按照固定的比例换算。
通过上面两步，可以将像素与rem动态的结合起来，页面也可以自动的变化。
2、通过设置 font-size: 0;可以有效的去除，块状元素中的空格、缩进、换行等，因为本身font-size为0了，所以不占空间，不会引起无效的空间布局
3、我们都知道，行内元素一般设置宽高等属性是无效的，比如width、height、line-height等，一般通过设置 display: inline-block等方法来处理，而行内元素如果不设置这种属性，那么他本身又具有height\line-height的具体呈现，这个是根据什么来的呢，一般情况下，是继承自父级块级元素元素；
但是我在实际开发中，发现即使设置父级元素的行高，也只是会影响布局，不会影响行内元素本身所呈现的（下面的0.4 rem 均对应15px）
这里是父级元素的截图，可以看出设置的行高确实已经发挥了作用，高度为15px，但是行内元素却没有发挥作用
经过对比发现，没有通过设置强制修改line-height的情况下，行内元素本身的高度会受本身内容的影响，比如字体等，最后也确实发现不同的字体所呈现的结果不同。 font-family为 "Avenir" 和 "Helvetica"高度竟然差了三个像素。。。
