字体-精灵图-图形

2024-02-28  本文已影响0人  SeanLink

边框的形状

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


18cb508134e.png

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

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

web字体

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

18cb5092601.png

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

使用Web Fonts

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

◼ 使用过程如下:

  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字体之上

X代表支持


18cb50d24f4.png

web fonts兼容性写法

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


18cb50dad16.png

◼ src用于指定字体资源

字体图标

◼ 字体图标的使用:

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

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

精灵图 CSS Sprite

什么是CSS Sprite,

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

Sprite图片制作(雪碧图、精灵图)

使用精灵图

◼ 精灵图如何使用呢?

◼ 如何获取精灵图的位置

http://www.spritecow.com/

cusor

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

◼ cursor常见的设值有

上一篇下一篇

猜你喜欢

热点阅读