CSS之额外知识补充 (九)：border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性-CSDN博客

文章详细介绍了CSS的各种特性，包括边框的创造性使用来绘制形状，如三角形；Web网络字体的概念、工作原理及使用方法，强调了WebFonts的兼容性问题；字体图标的优势和使用步骤；CSS精灵图的制作和应用以优化网页加载；以及cursor属性的设置，用于定义鼠标指针样式。

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. border图形

1.1 边框的形状

前言：border主要是用来给盒子增加边框的，但是在开发中我们也可以利用边框的特性来实现一些形状
边框的四个方向边框具体占据的范围
使用border属性来画图 ===> 三角形

.box {
      /* 1. 我们需要将box-sizing设置为 border-box */
      box-sizing: border-box;
      width: 100px;
      height: 100px;

      /* 2.由于改变盒子模型--边框大小不会改变盒子的大小，因此边框粗度设置为盒子的一半 */
      border: 50px solid transparent;
      border-top-color: orange;

      /* 3.可以旋转,改变一些旋转中心 */
      transform-origin: 50% 25%;
      transform: rotate(90deg);
    }

总结：利用border或者CSS的特性我们可以做出很多图，可以参考下面这个网站 ==> https://css-tricks.com/the-shapes-of-css/#top-of-site

2. Web网络字体

2.1 认识Web网络字体

我们之前通过 font-family 来设置使用的字体，我们可以提供1个或者多个字体，让浏览器自己去找到系统上可用的字体，但是这样字体选择非常有限，并且不能进行一些定制化的需求。

Web-safe字体：系统上自带的字体
Web Fonts：通过一些渠道获取到希望使用的字体

2.2 Web Fonts的工作原理

Web Fonts的工作原理
1. 首先，我们需要通过一些渠道获取到要使用的字体
  - 对于某些收费的字体, 我们需要获取到对应的授权
  - 对于某些公司定制的字体, 需要设计人员来设计
  - 对于某些免费的字体, 我们需要获取到对应的字体文件;
2. 其次，在CSS代码中使用Web Fonts字体
3. 最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中
从用户角度看Web Fonts字体
1. 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
2. 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体
3. 在浏览器中使用对应的字体显示内容

2.3 使用Web Fonts

操作步骤：
1. 在字体天下网站下载一个字体：https://www.fonts.net.cn/
2. 将字体放到对应的目录中
3. 通过@font-face（用于加载一个自定义的字体）来引入字体, 并且设置格式
4. 使用字体

2.4 Web Fonts的兼容性

不同的web-fonts字体会有不同的后缀名，并且对许多浏览器的兼容性也是不同的，因此我们需要准备各种格式的字体。
在这里插入图片描述

常见的字体

字体	后缀名	补充
TrueType	.ttf
OpenType	.otf	建立在TrueType字体之上
Embedded OpenType	.eot	OpenType字体的压缩版
SVG字体	.svg .svgz
示Web Open Font Format web开放字体	.woff	建立在TrueType字体之上

这里我们提供一个网站来生产对应的字体文件：https://font.qqe2.com/

2.5 Web Fonts兼容性写法

如果我们需要具备很强的兼容性, 那么可以如下格式编写
1. 这是一个兼容性的固定写法，我们需要写两个src
2. url的作用：指定资源的路径
3. format的作用：是用于帮助浏览器快速的识别字体文件的格式。其中，后缀名不能作为文件的识别，它是属于封装格式，与编码格式是不一样的`

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

3. Web字体图标

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

3.1 认识字体图标

什么是字体图标：原本我们设计字体只局限文字，但是我们可以将字体设计成各式各样的形状、图标的样子作为一种font-family，这样的字体就叫做字体图标。
字体图标的好处
- 放大不会失真，它是矢量的
- 可以任意切换颜色
- 用到很多个图标时，文件相对图片较小

3.2 使用字体图标

使用字体图标的步骤

登录阿里icons ：https://www.iconfont.cn/
将图标添加入库
点击 下载代码，下载完成后解压到对应的字体文件夹
使用相应的图标

字体图标有两种使用的方法
1. 第一种(推荐)：直接将iconfont.css链接至网页中，图标的使用通过添加对应的class即可
2. 第二种(有一点麻烦)：下载文件后，文件中有一个demo_index.html的网页，上面记录着所下载图标的编码。我们直接通过字符实体来添加

4. CSS精灵图

4.1 认识精灵图 CSS Sprite

什么是CSS Sprite：是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
精灵图的好处
1. 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
2. 减小图片总大小
3. 解决了图片命名的困扰，只需要针对一张集合的图片命名
如何制作精灵图：https://www.toptal.com/developers/css/sprite-generator

4.2 精灵图的使用

精灵图的原理：通过只显示图片的很小一部分来展示的，通过设置背景相关属性和其他一些属性来调整显示的部分。
1. 设置对应元素的宽度和高度
2. 设置精灵图作为背景图片
3. 调整背景图片的位置来展示
如何快速获取精灵图的位置：http://www.spritecow.com/
精灵图的案例练习：

<!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>
    .icon {
      display: inline-block;
      background-image: url(./imgs/iconall-sprite.png);
      background-repeat: no-repeat;
    }

    .icon-button {
      background-position: -2px -612px;
      width: 106px;
      height: 106px;
    }
  </style>
</head>

<body>
  <i class="icon icon-button"></i>
</body>

</html>

在这里插入图片描述

5. cursor属性

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