引入拓展字体
牛新宇 2022/5/9 vue
微服务项目搭配的框架elementUI其中默认内置一部分字体图标，但在实际开发过程中，这些字体可能不能够满足我们的需要。此时就需要增加拓展的字体文件，下面是使用拓展字体相关内容，请往下面阅读
# 为什么使用字体
- 多个图标字体合成一个字体文件，避免每张图片都需要联网请求；
- 字体可任意缩放，而图片放大会失真、缩小则浪费像素；
- 可通过css任意改变颜色、设置阴影及透明效果；
# 获取iconfont文件
# 访问阿里巴巴矢量图标库
https://www.iconfont.cn (opens new window)登录访问阿里巴巴矢量图标库官网 注：如果你还没优相关账号 请自行创建
# 创建iconfont项目
# 为什么需要创建项目
- 方便团队协作，一个项目可以多个人共享，这样团队的其他成员也可以进行操作项目中的图标，而不是每个人发现项目中缺少图标都去生成一个font文件，避免文件杂乱现象；
- 在实际项目中建议大家单独创建一个产品以外的font文件（有且一个）避免和产品的混淆在一起；
# 创建项目，填写相应信息并保存
# 查找图标并添加至项目
- 网站导航栏头部进行搜索需要的图标，例如‘女装’
- 选择需要的图标加入购物车，这个时候大家可以多加入几个符合条件的，在购物车可以进行筛选更贴合的并移除多余的图标
- 最后将确定好的图标统一添加至你所创建的项目中
- 最后在我的项目中查看项目图标，确保添加完成图标后点击下载即可获得相应的iconfont文件压缩包
# iconfont文件在项目中使用
- 将步骤3得到的压缩文件解压 如下图进行覆盖替换，若你的项目没有icon文件夹请自行创建
在style/index.less 文件中引用 @import './icon/iconfont.css';
页面中使用
<i class="iconfont icon-xianjin" />
效果如下：
注：class中使用两个样式 iconfont 在我们创建项目的时候设置的font_family，iconfont为默认值，一般不做修改，icon-则是前缀 -xxx则是具体的字体名称，这个名称在下载之前可以单独修改编辑