CSS-border图形、网络字体、字体图标、精灵图使用详解CSS之利用border画图形，网络字体和字体图标的引入和使

1. border画图形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1 {
      width: 0;
      height: 0;
      box-sizing: border-box;
      border: solid #d2691e;
      border-color: transparent transparent red transparent;
      border-width: 0px 100px 150px 100px;
    }

    .div2 {
      width: 0;
      height: 0;
      box-sizing: border-box;
      border: solid #d2691e;
      border-color: transparent transparent transparent red;
      border-width: 100px 100px 150px 300px;
    }

    .div3 {
      width: 0;
      height: 0;
      box-sizing: border-box;
      border: solid #d2691e;
      border-color: transparent transparent red transparent;
      border-width: 50px 100px 150px 300px;
    }

    .div4 {
      width: 0;
      height: 0;
      box-sizing: border-box;
      border: solid #d2691e;
      border-color: transparent transparent red red;
      border-width: 50px 100px 150px 300px;
    }
  </style>
</head>

<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
</body>

</html>

border画图形参考网站

2. 网络字体

2.1 使用过程

第一步：在字体天下网站下载一个字体，默认下载下来的是ttf文件
第二步：使用字体

使用过程如下：

将字体放到对应的目录中
通过@font-face来引入字体, 并且设置格式
使用字体

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

.box {
  font-family: "YuanTi";
}

注意: @font-face 用于加载一个自定义的字体

2.2 兼容性

在开发中某些浏览器可能不支持某些格式的字体, 所以为了浏览器的兼容性问题, 需要有对应其他格式的字体，常见字体如下：

TrueType字体：拓展名是 .ttf
OpenType/TrueType字体：拓展名是 .ttf、.otf，建立在TrueType字体之上
Embedded OpenType字体：拓展名是 .eot，OpenType字体的压缩版
SVG字体：拓展名是 .svg、 .svgz
WOFF表示Web Open Font Format web开放字体：拓展名是 .woff，建立在TrueType字体之上

一个网站来生产对应的字体文件：在线字体编辑

兼容性写法

@font-face {
  font-family: "YuanTi";
  src: url("./fonts/AaQingHuanYuanTi.eot"); /* IE9 */
  src: url("./fonts/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("./fonts/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
  url("./fonts/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  url("./fonts/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */

  font-style: normal;
  font-weight: normal;
}

body {
  font-family: "YuanTi";
}

src用于指定字体资源
- url指定资源的路径
- format用于帮助浏览器快速识别字体的格式

3. 字体图标

3.1 认识字体图标

字体图标的好处：
- 放大不会失真
- 可以任意切换颜色
- 用到很多个图标时，文件相对图片较小

3.2 字体图标的使用

字体图标的使用：
- 登录阿里icons
- 下载代码，并且拷贝到项目中
将字体文件和默认的css文件导入到项目中

字体图标的使用步骤:

第一步: 通过link引入iconfont.css文件
第二步: 使用字体图标

使用字体图标常见的有两种方式:

方式一: 通过对应字体图标的Unicode来显示代码

方式二: 利用已经编写好的class, 直接使用即可

<style>
@font-face {
  font-family: "iconfont";
  src: url("./fonts03/iconfont.ttf");
}

.iconfont {
  font-family: "iconfont";
  font-style: normal;
}

.music::before {
  content: "\e664";
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}
</style>

<!-- 直接通过内容(字符实体) -->
<i class="iconfont">&#xe654;</i>
<i class="iconfont">&#xe664;</i>

<i class="icon"></i>

<!-- 不使用字符实体的方式展示出来(伪元素) -->
<i class="iconfont music"></i>

补充: 如果有新的图标，使用最新下载的字体

4. CSS Sprite

4.1 认识精灵图

CSS Sprite是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
使用CSS Sprite的好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
Sprite图片制作（雪碧图、精灵图）
- 方法1：Photoshop, 设计人员提供
- 方法2：www.toptal.com/developers/…

4.2 精灵图的使用

通常使用背景

✓ 1.设置对应元素的宽度和高度

✓ 2.设置精灵图作为背景图片

✓ 3.调整背景图片的位置来展示

.topbar {
  background-image: url(../images/topbar_sprite.png);
  background-repeat: no-repeat;
  display: inline-block;
}

i.hot-icon {
  background-position: -192px 0;
  width: 26px;
  height: 13px;
}

i.logo-icon {
  background-position: 0 -19px;
  width: 157px;
  height: 33px;
}

<i class="topbar hot-icon"></i>
<i class="topbar logo-icon"></i>

如何获取精灵图的位置
- 参考网站(上传图片可以获取代码)

5. cursor

cursor可以设置鼠标指针（光标）在元素上面时的显示样式

cursor常见的设值有
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
```
cursor: pointer
```