引入拓展字体

2022/5/16 jsp

sce项目搭配的框架bootstrap其中默认内置一部分字体图标,但在实际开发过程中,这些字体可能不能够满足我们的需要。此时就需要增加拓展的字体文件,下面是使用拓展字体相关内容,请往下面阅读

# 为什么使用字体

  1. 多个图标字体合成一个字体文件,避免每张图片都需要联网请求;
  2. 字体可任意缩放,而图片放大会失真、缩小则浪费像素;
  3. 可通过css任意改变颜色、设置阴影及透明效果;

# 获取iconfont文件

下载iconfont图标可以访问阿里巴巴矢量图标库 https://www.iconfont.cn/

img

img

img

img

# 解压并应用到项目中

img

img

img

# 最终的实现效果

img

注:class中使用两个样式 iconfont 在我们创建项目的时候设置的font_family,iconfont为默认值,一般不做修改,icon-则是前缀 -xxx则是具体的字体名称,这个名称在下载之前可以单独修改编辑