fill:currentColor? iconfont为何要设置 vertical-align: -0.15em？

一. fill:currentColor是什么意思？

   一）fill

1. fill是SVG元素的一种属性;SVG元素的这些属性，用于指定如何处理或者呈现元素的详细信息
2. 比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。对于动画，它定义了动画的最终状态。fill:currentColor中，它定义了图标的颜色。

   二） currentColor: 表示“当前的标签所继承的文字颜色”。

1. 在css中，currentColor是一个变量，这个变量的值是当前元素的color值。
2. 如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父元素继承而来。

 

二. iconfont为何要设置vertical-align: -0.15em

因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果. 

三. 例子

iconfont（阿里图标库） 的 symbol引用，要求加入的通用css代码 

.svg-icon {
  /*将icon大小设置和字体大小一致，后续在通过svg-icon 使用icon的时候，可直接设置图标的font-size即可控制图标大小 */
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  overflow: hidden;
}