                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /用字體在網(wǎng)頁中畫ICON圖標

麻煩幫忙看下，昨天折騰了半天。。。Firefox轉不起來，chrome測試正常，為嘛呢。。。。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>

????<style?type="text/css">
????????*{margin:?0;padding:?0;}
????????li{list-style:?none;}
????????@font-face{
????????????font-family:?"Heson";
????????????src:?url("fonts/imooc.eot");
????????????src:?url("fonts/imooc.eot?#iefix")?format("embedded-opentype"),
?????????????????url("fonts/imooc.svg")?format("svg"),
?????????????????url("fonts/imooc.ttf")?format("truetype"),
?????????????????url("fonts/imooc.woff")?format("woff");
????????????font-style:?normal;
????????????font-weight:?normal;
????????}
????????/*?format后面跟括號之間沒有空格！??！?*/
????????.icon{
????????????font-family:?"Heson";
????????????font-style:?normal;
????????????font-weight:?normal;
????????????font-size:?148px;
????????????color:?#F00;
????????????-webkit-font-smoothing:?antialiased;
????????????-moz-osx-font-smoothing:?grayscale;
????????}
????????.icon-spinner:before{
????????????content:?"\e600";
????????}

????????.fontBox{
????????????width:?600px;
????????????margin:?0?auto;
????????}

????????@-webkit-keyframes?spinner{
????????????0%{
????????????????-webkit-transform:?rotate(0deg);
????????????}
????????????100%{
????????????????-webkit-transform:?rotate(360deg);
????????????}
????????}

????????@-moz-keyframes?spinner{
????????????0%{
????????????????-moz-transform:?rotate(0deg);
????????????}
????????????100%{
????????????????-moz-transform:?rotate(360deg);
????????????}
????????}

????????@keyframes?spinner{
????????????0%{
????????????????transform:?rotate(0deg);
????????????}
????????????100%{
????????????????transform:?rotate(360deg);
????????????}
????????}


????????.spinner{
????????????-webkit-animation:?spinner?2s?infinite?linear;
????????????-moz-animation:?spinner?2s?infinite?linear;
????????????animation:?spinner?2s?infinite?linear;
????????}
????</style>
</head>
<body>
????<ul>
????????<li><i?class="icon?icon-spinner?spinner"></i></li>
????????<li><i?class="icon?icon-spinner?spinner"></i></li>
????????<li><i?class="icon?icon-spinner?spinner"></i></li>
????</ul>
</body>
</html>