CSS - 字体和精灵图

coderklaus
586 阅读5分钟

web fonts

我们在网页中引入字体的时候，一般会使用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: 'JianHao';
      /* 在src属性中引入对应所需要的字体 */
      src: url(./fonts/JianHao.ttf);
    }

   .jian-hao {
    /* 使用我们自定义的网络字体  */
    font-family: 'JianHao';
   }
  </style>
</head>
<body>
  <div class="jian-hao">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, esse?
  </div>
</body>
</html>

字体格式

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

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

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

兼容性写法（了解）

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

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

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

字体图标

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

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

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

我们可以在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="./fonts/iconfont.css">
  <script src="./iconfont.js"></script>
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    
    .iconfont {
      font-size: 20px;
      /*
      	在绝大多数网址中，通常使用i标签来引入我们的字体图标
        而i标签本质是用来设置斜体，所以如果我们使用i标签来设置字体图标的时候
      	需要将font-style属性的值进行重置
      */
      font-style: normal;
    }

    .music::before {
      /* 对应的代码可以在引入的css文件中进行查看 */
      content: "\e61a";
    }
  </style>
</head>
<body>
  <!-- 使用方式一：通过引用对应字体图标的Unicode编码 -->
  <i class="iconfont">&#xe61a;</i>

  <!-- 使用方式二: 利用已经编写好的class, 直接使用即可 -->
  <i class="iconfont icon-music"></i>

  <!-- 使用方式三: 自己通过伪类去进行设置 -->
  <i class="iconfont music"></i>
  
  <!-- 使用方式四: 通过svg引入 -->
  <!-- 推荐，因为svg引入支持多色，而传统字体只支持单色 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
  </svg>
</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: url(https://s2.music.126.net/style/web2/img/frame/topbar.png);
    }

    .hot {
      background-position: -192px 0;
      width: 26px;
  	  height: 13px;
    }
  </style>
</head>
<body>
  <div class="box hot"></div>
</body>
</html>
avatar
文章
阅读
粉丝