CSS旋转导致像素渲染不同？

Question

我有一个svg图标，我使用以下CSS旋转：

 .icon {
   border-style: solid;
   border-width: 2px 2px 0 0;
   content: '';
   display: inline-block;
   height: 0.4em;
   width: 0.4em;
   left: 0.2em;
   position: relative;
   top: 0.15em;
   -ms-transform: rotate(-45deg); /* IE 9 */
   -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   vertical-align: top;
}

重复相同的图标，但有时它的像素会变形'变形'。

不确定这里发生了什么。

Answer 1

将以下CSS应用于您的图标：

-webkit-font-smoothing: antialiased;