CSS - 字体和精灵图

我们在网页中引入字体的时候，一般会使用font-family

对于font-family, 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体

也就是font-family可以使用的字体为用户操作系统上存在的字体，这些字体也被称之为Web-safe 字体

但这些字体毕竟是有限的，而且这些字体并不能进行一些定制化的需求

此时如果我们需要使用到一些特别的字体，使用一些系统不存在的字体的时候，我们就可以使用web fonts（网络字体）

<!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>
    /* 将这个字体引入到网页中 */
        /*
      定义网络字体
      告诉浏览器去哪里加载我们所需要的网络字体
    */
    @font-face {
          /* 为字体取一个名称 */
      font-family: "why";
          /* 在src属性中引入对应所需要的字体 */
      src: url("./fonts/AaQingHuanYuanTi-2.ttf");
    }

    .box {
        /* 使用我们自定义的网络字体  */
      font-family: "why";
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>

</body>
</html>

字体格式

我们可以在can i use 上查询对应字体在不同浏览器上的兼容情况

我们可以在 webfont-generator 中将我们的字体转换为其它格式的字体

后缀名	全称	说明	备注
.ttf	TrueType Font	在 Mac 和 Windows 操作系统上，TTF 一直是最常见的格式，所有主流浏览器都支持它苹果和微软联合研发	无压缩
.otf	OpenType Font	在ttf上进行的优化和扩展后形成的字体微软和Adobe联合研发	无压缩
.eot	Embedded Open Type	微软为web设置的字体，仅在IE中支持微软研发	压缩
.woff/.woff2	Web Open Font Format	Mozilla 基金会和微软研发，目的是使用一套全新的字体压缩技术字体通过WOFF的编码工具压缩后，字体一般比TTF字体小40% `woff字体相比ttf字体而言加载更快，更适用于网页` woff2是woff的第二代版本，在原有的基础上提升了 30% 的压缩率	目前主流的浏览器的新版本几乎都支持 WOFF
.svg/.svgz	Scalable Vector Graphics font	SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用 SVGZ是压缩版的SVG	SVG 字体是 iOS 上 Safari 4.1 以下唯一允许的字体格式

兼容性写法（了解）

在早期，各个浏览器对于字体的兼容性各不相同，所以对于网络字体我们需要使用兼容性写法

但是对于目前的大部分现代浏览器而言，都已经支持了ttf和woff/woff2字体格式，直接使用其中任意一种即可

<!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>
    @font-face {
      /* 自定义字体名称 */
      font-family: "why";
        /*
  早期IE 不支持设置多个格式字体，所以需要单独在前面写一行
  以便于在设置多个格式字体无效的时候，存在fallback字体
  */
      src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */
      
      
      
        /*
  src属性可以设置多个格式的字体
  url函数 用来引入对应格式的字体文件
  format函数 用来说明字体的编码格式，用以加快浏览器解析字体的速度 不是必须的
  tips: format定义的是编码格式 --- 字体以何种形式进行编码
  			不是封装格式 --- 后缀名
  			在绝大多数情况下，编码格式和封装格式是一致的
  			但是不排除 编码格式和封装格式不一致的情况
  			例如: 我们将jpg图片后缀修改为png后缀的时候，图片依旧可以正常打开
  			所以在某些情况下，使用format声明字体的编码格式可以提升浏览器解析字体的效率
  */
      
      
      
      src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
      url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */

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

    body {
      font-family: "why";
    }
  </style>
</head>
<body>
  
  <div class="box">我是div元素</div>

</body>
</html>

字体图标

字体可以设计成各式各样的形状，所以我们可以直接把字体直接设计成图标的样子

而这些字体就被称之为字体图标

所以严格来说，字体图标本质上是一种特殊的网络字体

我们可以在icomoon 或 iconfont 上获取我们所需要的字体图标

字体图标的好处:

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

<!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>
    <!--
    以iconfont为例，下载所需要的字体图标后，会自动生成我们所需要的样式文件
    我们将字体图标和样式文件放置在fonts文件夹下后 引入对应的css文件
  -->
    <link rel="stylesheet" href="./fonts03/iconfont.css">
  <style>
    @font-face {
      font-family: "iconfont";
      src: url("./fonts03/iconfont.ttf");
    }

    .iconfont {
      font-family: "iconfont";
            /*
      	在绝大多数网址中，通常使用i标签来引入我们的字体图标
        而i标签本质是用来设置斜体
      	所以如果我们使用i标签来设置字体图标的时候
      	需要将font-style属性的值进行重置
      */
      font-style: normal;
    }

    .music::before {
     /* 对应的代码可以在引入的css文件中进行查看 */
      content: "\e664";
    }

    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
    }

  </style>
</head>
<body>
  
  <!-- 直接通过内容(字符实体) -->
    <!-- 使用方式一：通过引用对应字体图标的Unicode编码 -->
  <i class="iconfont">&#xe654;</i>
  <i class="iconfont">&#xe664;</i>
  <!-- 使用方式二: 利用已经编写好的class, 直接使用即可 -->
  <i class="icon"></i>

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

</body>
</html>

精灵图

CSS Sprite (CSS 精灵图，CSS雪碧图) 是一种CSS图像合成技术

将各种小图片（主要是一些png或jpg格式的图片）合并到一张图片上

然后利用CSS的背景定位来显示对应的图片部分

我们可以通过sprite generator来将多个小图片合成为一张精灵图

我们可以通过spritecow来帮助我们对精灵图中各个小图标的大小和位置进行定位

使用CSS Sprite的好处

减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名

<!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>
    .box {
      background: #333;
    }

    .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;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <i class="topbar hot-icon"></i>
    <i class="topbar logo-icon"></i>
    <!-- <i class="topbar "></i> -->
  </div>

</body>
</html>

09_CSS - 字体和精灵图

CSS - 字体和精灵图

字体格式

兼容性写法（了解）

字体图标

精灵图