阿里字体图标使用方法

最新推荐文章于 2024-08-07 11:27:30 发布

sT-an

最新推荐文章于 2024-08-07 11:27:30 发布

阅读量682

点赞数

分类专栏： css 文章标签： css 字体

本文链接：https://blog.csdn.net/sTaANn/article/details/79457151

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

登录阿里字体：http://www.iconfont.cn/collections/index
选择字体并添加入库
这里写图片描述
点击购物车按钮，如果没项目则新建项目，有项目就加入当前项目

生成css代码：

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

定义字体class名

.icon-font{
        font-family:"iconfont";
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        padding-left:20px;
        color: blue;
    }