1.效果图:

2.实现思路:  去阿里图标上找到对应的思源字体   替换上去就可以了

iconfont-阿里巴巴矢量图标库

 找到项目要求的字体大小, 然后直接复制代码使用:

 

 

①.这是复制过来的代码:

@font-face {

    font-family: '思源黑体 Normal';

    font-weight: 350;

    src: url('//at.alicdn.com/wf/webfont/q0e6HO0eRARd/AwbNLH6DRKdm.woff2') format('woff2'), url('//at.alicdn.com/wf/webfont/q0e6HO0eRARd/8KhuA6FUpfTD.woff') format('woff');

    font-display: swap;

}

②.这是设置根元素的代码

html {

    font-family: '思源黑体 Normal', Helvetica, 'Microsoft YaHei', Arial, sans-serif;

    font-size: 100%;

    color: #333333;

    height: 100%;

}

body,

#app {

    height: 100%;

}

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐