码迷,mamicode.com
首页 > 其他好文 > 详细

矢量字体图标

时间:2015-05-19 12:23:45      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

1、首先使用 iconfont.cn在线生成矢量图标

技术分享

 

 

2、然后,将生成的矢量字体下载到本地,使用font-face在网页上定义该矢量图标对应的字体,最后引用该自定义的字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矢量字体图标应用</title>
    <style>
    /*font-face声明字体*/
    @font-face {
        font-family: ‘iconfont‘;
        src: url(‘vectorimg/webfont.eot‘); 
        src: url(‘vectorimg/webfont.eot?#iefix‘) format(‘embedded-opentype‘), 
        url(‘vectorimg/webfont.woff‘) format(‘woff‘),   
        url(‘vectorimg/webfont.ttf‘) format(‘truetype‘), 
        url(‘vectorimg/webfont.svg#webfont‘) format(‘svg‘); 
        /* IE9*/
        /* IE6-IE8 */
        /* chrome、firefox */
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        /* iOS 4.1- */
    }
    /*定义使用iconfont的样式*/
    .iconfont{
        font-family:"iconfont";
        font-size:28px;font-style:normal;
        -webkit-text-stroke-width: 0.2px;  /*防止边缘锯齿状 */
        -webkit-font-smoothing: antialiased;
    }



    </style>
</head>
<body>

    
<i class="iconfont">欢迎您</i>

    
</body>
</html>

 

矢量字体图标

标签:

原文地址:http://www.cnblogs.com/lydialee/p/4513865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!