字体-精灵图-图形

边框的形状

◼ border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:

18cb508134e.png

◼ 假如我们将border宽度设置成50会是什么效果呢?

• 如果我们进一步, 将另外三边的颜色去除呢?
• 如果我们将这个盒子旋转呢?

◼ 所以利用border或者CSS的特性我们可以做出很多图形:

• https://css-tricks.com/the-shapes-of-css/#top-of-site

web字体

下面的字体样式, 系统的字体肯定是不能实现的

18cb5092601.png

◼ 那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可.

使用Web Fonts

◼ 第一步：在字体天下网站下载一个字体

• https://www.fonts.net.cn/fonts-zh-1.html
• 默认下载下来的是ttf文件；

◼ 使用过程如下：

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

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

web-fonts的兼容性

字体格式有如下几种:

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

• 可以用一个.tff文件生产对应的字体文件

  https://font.qqe2.com/# 暂时可用

X代表支持

18cb50d24f4.png

web fonts兼容性写法

◼ 如果我们具备很强的兼容性, 那么可以如下格式编写:

18cb50dad16.png

◼ src用于指定字体资源

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

字体图标

◼ 字体图标的使用：

• 登录阿里icons（https://www.iconfont.cn/）
• 下载代码，并且拷贝到项目中

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

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

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

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

  
  18cb512fc67.png

精灵图 CSS Sprite

什么是CSS Sprite,

是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分

Sprite图片制作（雪碧图、精灵图）

• 方法1：Photoshop, 设计人员提供
• 方法2：https://www.toptal.com/developers/css/sprite-generator

使用精灵图

◼ 精灵图如何使用呢?

• 精灵图的原理是通过只显示图片的很小一部分来展示的;
• 通常使用背景:
  ✓ 1.设置对应元素的宽度和高度
  ✓ 2.设置精灵图作为背景图片
  ✓ 3.调整背景图片的位置来展示

◼ 如何获取精灵图的位置

http://www.spritecow.com/

cusor

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

◼ cursor常见的设值有

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