web字体和图标（CSS查漏补缺）

文: jack同学

jack同学

• web字体： 为了解决用户电脑上没有安装的字体

  • 可以使用font-family设置字体显示，需要用户电脑本身就支持某个字体

  • 第二种强制让用户下载该字体

    • 准备一个字体文件（一般公司设计师会提供），一般字体文件格式每个浏览器支持都不同，所以需要同一个字体的多个格式文件。（常见的字体格式有 .ttf / .otf / .eot / .woff / .woff2 / .svg

    • 使用@font-face指令制作一个新字体

      @font-face {
          font-family: "杰克体"; /*给新字体取名字*/
          src: url("./../font/杰克体.ttf"), /*指定新字体的路径*/
               url("./../font/杰克体.eot"),
               url("./../font/杰克体.woff"),
               url("./../font/杰克体.svg");
      }
      

    • 使用新字体

      .icon {
          font-family: "杰克体" !important;
      }
      /* 当添加这个类名时，当前元素就使用了这个新字体了*/
      

- 当页面加载这个css文件时，浏览器会临时使用这个字体在这个页面，当页面关闭字体失效

• 字体图标

  • 把需要的图标制作成web字体文件，使用web字体加载的方式使用。
  • 优点：字体图标数量可控，文件较小，效率更高，字体图标可设置颜色、大小、粗细等且不会改变字体图标的质量，不会模糊，因为他们本身就是字体。

• 雪碧图(精灵图)

  • 一些小的图片合成为一张图片加载到页面，通过background-position定位图片显示
  • 根据公司情况使用雪碧图还是字体图标
  • 优点：只加载一张图片，减少文件大小，减少请求次数

• 常用字体图标库网站

  • 阿里巴巴字体图标库https://www.iconfont.cn/