字体图标的引入与显示-在线源码网

字体图标

我们只需要在阿里巴巴矢量库创建一个账号，即可实现字体图标的调用

我们我我们需要的字体文件加入购物车创建项目即可进行调用

unicode调用

<body>
    <div style="font-family: iconfont">
      <b></b>
    </div>
  </body>
  <style>
    /* 字体图标 */
    @font-face {
      /* 字体名称 */
      font-family: "iconfont";
      /* 字体文件位置 */
      src: url("//at.alicdn.com/t/c/font_3886805_aaw7a9ra59h.woff2?t=1676023125202")
          format("woff2"),
        url("//at.alicdn.com/t/c/font_3886805_aaw7a9ra59h.woff?t=1676023125202")
          format("woff"),
        url("//at.alicdn.com/t/c/font_3886805_aaw7a9ra59h.ttf?t=1676023125202")
          format("truetype");
    }
    /* 字体图标 */
  </style>

Font class调用

我们使用link调用阿里巴巴矢量库为我们提供的远程css文件

这个方法为主流调用

<body>
    <div class="iconfont">
      <b class="icon-qianbao ziti"></b>
    </div>
  </body>
  <style>
    @import url(//at.alicdn.com/t/c/font_3886805_aaw7a9ra59h.css);

    /* 我们可以在这里自定义图标大小颜色等等类型 */
    .ziti {
      font-size: 2em;
      color: brown;
    }
  </style>

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1、本网站名称：在线源码网
2、本站永久网址：https://zaixym.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END