十、CSS之字体图标的使用_css 本地字体图标

1. 字体补充

1.1 网络字体

• ***@font-face CSS属性***可以让网页支持网络字体(Web Font)，不再局限于系统自带的字体

• 常见的字体文件格式

  • .ttf
  • .otf
  • .eot
  • .svg 、 .svgz
  • .woff

• ***@font-face CSS属性***的基本使用

  • @font-face {
        /* 字体名称可以随便写 */
        font-family: "net-font";
        /* 浏览器会按顺序加载每一个字体文件，直到找到他支持的字体 */
        src: url("./font/ZhiMangXing-Regular.ttf")
             url("./font/ZhiMangXing-Regular.otf");
    }
    p {font-family: "net-font";}
    1
    2
    3
    4
    5
    6
    7
    8

  • 注意：src里面只能放入***同一个字体类型不同格式的文件***，而不***能放入多个字体类型文件***

1.2 字体图标

• 思考：字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？

  • 当然可以，这个就叫做字体图标

• 字体图标的好处：

  • 放大不会失真

  • 可以任意切换颜色

  • 用到很多个图标时，文件相对图片较小

• 字体图标的使用：

  • 登录阿里icons（https://www.iconfont.cn/）

  • 选择自己要用的图标，添加到项目

    

  • 下载项目到本地

    

  • 通过link引入iconfont.css文件

    <link rel="stylesheet" href="./font/iconfont.css">
    1

  • 在需要使用字体图标的标签中，添加iconfont和指定字体图标的类名

    • <i class="iconfont icon-gouwuche"></i>
      1

    

• 如果需要***修改字体图标的大小***，则需要修改对应元素的***字体大小***

1.3 追加字体图标

1. 将需要添加的字体图标放入到原来的项目中

2. 打开我的项目，查看在线链接，复制代码替换***iconfont.css***文件中的@font-face属性

   

3. 复制新增的字体图标的代码，并在iconfont.css文件中写入如下配置

   • 自定义类名:before {
       content: "字体图标代码";
     }
     1
     2
     3

1.4 外链引入字体图标

• 阿里巴巴字体图标允许我们通过CDN的方式引入字体图标CSS样式，无需下载到本地

1. 将字体图标添加到我的项目后，点击Font class，将CSS外链引入到项目文件中

   

2. 使用字体图标时，只需给HTML元素添加iconfont 图标类名，更改字体图标大小只需更改字体大小

   • <i class="iconfont iconyonghu"></i>
     1

3. 项目需要追加字体图标时，必须更新外链链接，并且重新引入更新后的CSS外链链接，才能使用新的字体图标

   

1.5 svg引入字体图标

• 只有使用svg方式才能引入彩色的字体图标

1. 选择 symbol方式，并引入外链的JS文件

   

2. 添加如下CSS样式

   • .icon {
     	width: 1em;
     	height: 1em;
     	vertical-align: -0.15em;
     	fill: currentColor;
     	overflow: hidden;
     }
     1
     2
     3
     4
     5
     6
     7

3. 通过svg元素，将彩色图标应用于页面

   • <svg class="icon" aria-hidden="true">
     	<use xlink:href="#icon-xxx"></use>
     </svg>
     1
     2
     3