                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /用字体在网页中画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>