@font-face的使用

一、引用线上图标库

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">i> <i class="iconfont">i> <i class="iconfont" style="font-size:16px; color:#F5425F;">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">i>
        <i class="myiconfont">i>
        <i class="myiconfont" style="font-size:16px; color:#F5425F;">i>
        
    body>

 

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

你可能感兴趣的:(@font-face的使用)