chrome浏览器下@font-face字体图标出现锯齿解决方法

chrome浏览器下@font-face字体图标出现锯齿解决方法

现今流行的图标字体(iconFont)中,有没有发现@font-face字体图标在chrome浏览器下带圆角的图标有锯齿?前些时间参加一交流会,一大湿在分享课上就有关提到这个小技巧。那天总算没白听,哈哈哈...现把它分享出来,希望对码友们有用。

 图片展示效果:


处理前: demo

@font-face {
         font-family:icomoon;
         src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?-m9wrda);
         src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?#iefix-m9wrda)format("embedded-opentype"),
             url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.ttf?-m9wrda)format("truetype"),
             url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.woff?-m9wrda)format("woff"),
             url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon)format("svg")
       
}


处理后:demo

@font-face {
         font-family:icomoon;
         src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?-m9wrda);
         src:url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.eot?#iefix-m9wrda)format("embedded-opentype"),
             url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon)format("svg"),
             url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.ttf?-m9wrda)format("truetype"),
             url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.woff?-m9wrda)format("woff")      
}


其实就是把svg字体渲染格式往前提了两级。

url(http://s3.amazonaws.com/icomoon.io/4/IcoMoonApp/icomoon.svg?-m9wrda#icomoon)format("svg")


css3有个属性是让字体有平滑效果的:

.glyphicon {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

但貌似这个属性其实也并不能解决在chrome下会有锯齿的情况,不过大家在使用字体的时候注意先后顺序和加上上面属性,双重保险。

转载请注明来自 520UED http://www.520ued.com/article/538833aeb992a7c43f5c2052

comments powered by Disqus