Question

我正在使用CSS在我正在创建的分析工具上提供矢量图标来代替图像。这使得它加载更快，图像缩放更清晰。它们在chrome和firefox上运行良好。但是，他们没有出现在IE9或更老的Android手机上（我认为在v4.0之前）。

我已经复制了下面的相关CSS。我应该添加CSS的并行部分，我指定浏览器或屏幕大小以容纳这些设备吗？或者我可以在这个CSS中做些什么来修复错误，或者提供一个后备图像？目前，浏览器根本没有显示任何图标。

@font-face {
    font-family: 'unicorns';
    src: url('font/unicorns.eot');
    src: url('font/unicorns.eot') format('embedded-opentype'),
         url('font/unicorns.woff') format('woff'),
         url('font/unicorns.ttf') format('truetype'),
         url('font/unicorns.svg#unicorns') format('svg');
}


.icon:before {
    font-family: "unicorns", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -o-transform: scale(1);
    /*text-rendering: optimizeLegibility; not supported in all browsers
    The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux.*/
}
.boy:before {content: "a";}
.girl:before {content: "b";}

.respect:before {content: "r";}
.freedom:before {content: "m";}
.fun:before {content: "p";}

.icon-green:before {color: #008000;}
.icon-yellow:before {color: #e9b800;}
.icon-red:before {color: #cc0000;}
.icon-pink:before {color: #ff99ff;}

.icon-10:before {font-size: 10px; margin-right: 2px;}
.icon-30:before {font-size: 30px; margin-right: 5px;}
.icon-60:before {font-size: 60px; margin-right: 5px;}
.icon-90:before {font-size: 96px; margin-right: 5px; line-height: 100px;}

font-face图标字体跨浏览器和移动浏览器兼容性

0 个答案: