3.切图仔背过的八股文

1.讲一讲你对网络字体（web fonts）的理解

• 我们提供一个或多个字体种类的名称后， 浏览器会在列表搜寻，直到找到他所运行的系统上可以用的字体。但是这样的话，字体选择是有限的，不能用一些定制化的字体

• 网络字体不是预先安装在用户的操作系统的，是浏览器在渲染网页时下载的。当我们要用一些os没有的字体的时候

• 这个时候我们就可以用web fonts来解决这个问题，步骤如下

  • 1. 一般情况下是在自己的服务器下载字体，也可以在网站下载，默认下载出来的是ttd文件

    2. 使用字体，将字体放在对应目录中，通过@font-face语法引入字体，并且设置格式。然后使用字体

    /* 将这个字体引入到网页中 */
        @font-face {
          font-family: "why";
          src: url("./fonts/AaQingHuanYuanTi-2.ttf");
        }
    ​
        .box {
          font-family: "why";
        }

• web-font要考虑兼容性问题

2.讲一讲你对字体图标的理解以及使用字体图标有什么好处

• 字体图标的好处

  • 放大不会失真

  • 可以切换任意一个颜色

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

  • 我们最常见的话是用阿里巴巴的icons 他是开源免费的

• 使用步骤

  • 1.下载好icons的文件夹

  • 2.通过link引入iconfont.css的文件

  • 3.使用字体图标，开发常用的是已经编号的class直接使用

3.讲一讲css sprite （精灵图）

• css sprite是css图像合成技术，将各种小图片合并在一张图片上，然后利用bgc-i背景定位显示对应的图片部分

• 好处的话就是

  • 减少http请求数量，加快网页响应速度，减轻服务器的压力，性能优化

  • 减少了图片的总数

  • 解决了图片命名的困扰