阿里巴巴字体图标练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标练习</title>
    <style>
        /*1.!/寻找项目中字体图标的连接代码*!*!*/
        @font-face {
            font-family: \'iconfont\';  /* project id 395624 */
            src: url(\'//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.eot\');
            src: url(\'//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.eot?#iefix\') format(\'embedded-opentype\'),
            url(\'//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.woff\') format(\'woff\'),
            url(\'//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.ttf\') format(\'truetype\'),
            url(\'//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.svg#iconfont\') format(\'svg\');
        }
        @font-face {
            font-family: \'iconfont\';  /* project id 394512 */
            src: url(\'//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.eot\');
            src: url(\'//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.eot?#iefix\') format(\'embedded-opentype\'),
            url(\'//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.woff\') format(\'woff\'),
            url(\'//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.ttf\') format(\'truetype\'),
            url(\'//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.svg#iconfont\') format(\'svg\');
        }
        @font-face {
            font-family: \'iconfont\';  /* project id 395624 */
            src: url(\'//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.eot\');
            src: url(\'//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.eot?#iefix\') format(\'embedded-opentype\'),
            url(\'//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.woff\') format(\'woff\'),
            url(\'//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.ttf\') format(\'truetype\'),
            url(\'//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.svg#iconfont\') format(\'svg\');
        }
        .iconfont {
            font-family:"iconfont" !important;
            font-size:16px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            color:red;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <!--2.类名为iconfont-->
    <!--3.复制图标字体代码-->
    <!--4.导入阿里巴巴字体图标的压缩后的文件-->
    <i class="iconfont">&#xe626;</i>
    <i class="iconfont">&#xe60d;</i>
    <i class="iconfont">&#xe63c;</i>
    <i class="iconfont">&#xe600;</i>

</body>
</html>
发表于 2017-09-28 10:52 红宰工程师阅读(142) 评论(0) 编辑收藏举报