矢量字体图标

最新推荐文章于 2025-08-13 17:18:47 发布

转载最新推荐文章于 2025-08-13 17:18:47 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lydialee/p/4513865.html

文章标签：

#移动开发

本文介绍如何使用iconfont.cn在线生成矢量图标，并将其下载到本地。通过font-face定义字体，实现在网页中使用自定义矢量图标。提供了一个简单的HTML示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>