@font-face的使用

最新推荐文章于 2022-05-20 00:53:37 发布

weixin_30859423

最新推荐文章于 2022-05-20 00:53:37 发布

阅读量228

点赞数 1

原文链接：http://www.cnblogs.com/luhailin/p/6638224.html

版权

一、引用线上图标库

1.登录阿里巴巴矢量图标库（可以微博登录），鼠标悬停在需要的图标，点击收藏入库（购物车图标），点击下载到本地或添加到项目

2.在页面中使用

　　<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
　　　　　　// 引用线上的图标库

            @font-face {
              font-family: 'iconfont';  /* project id 238765 */
              src: url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.eot');
              src: url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.eot?#iefix') format('embedded-opentype'),
              url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.woff') format('woff'),
              url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.ttf') format('truetype'),
              url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.svg#iconfont') format('svg');
            }


            //图标样式
            .iconfont {
              font-family:"iconfont" !important;      
              font-size:16px;
              font-style:normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }
        </style>
    </head>
    <body>
        
        <i class="iconfont">&#xe66e;</i>    <!--&#xe66e是图标代号-->
        <i class="iconfont">&#xe64e;</i>
        <i class="iconfont" style="font-size:16px; color:#F5425F;">&#xe65e;</i>
        
    </body>

3.本地使用

　　　　　　@font-face {
                font-family:myFont666;    //自定义命名
                src: url('iconfont.ttf'), //这个路径为本地的相对路径，即该字体文件与html的路径
                     url('iconfont.svg'),
                     url('iconfont.woff'),
                      url('iconfont.eot');
            }
            .myiconfont {
              font-family:"myFont666" !important; //名字一致
              font-size:50px;
              font-style:normal;
              color:#ccc;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }
        </style>
    </head>
    <body>
        
        <i class="myiconfont">&#xe66e;</i>
        <i class="myiconfont">&#xe64e;</i>
        <i class="myiconfont" style="font-size:16px; color:#F5425F;">&#xe65e;</i>
        
    </body>

转载于:https://www.cnblogs.com/luhailin/p/6638224.html

weixin_30859423

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
@font-face的使用

一、引用线上图标库1.登录阿里巴巴矢量图标库（可以微博登录），鼠标悬停在需要的图标，点击收藏入库（购物车图标），点击下载到本地或添加到项目2.在页面中使用　　<head> <meta charset="UTF-8"> <title></title> <style&g...
复制链接

扫一扫