CSS字体图标

web字体

• 为自己的网页指定特殊的字体，无须考虑用户电脑上是否安装了此字体。
• 可以在 阿里妈妈webfont 平台上输入想要使用指定字体的文字内容，然后下载下来
• 用法和web字体图标一样
  • 声明自定义字体：@font-face（直接复制）
  • 定义应用字体的样式
  • 为元素应用样式
• 注意使用web字体时，只有输入的内容中的文字才会应用下载下来的字体，因为下载下来的文件里面是输入的内容的文字的编码

字体图标

• 本质是字体，可以任意改变大小、颜色、透明度等等
• 把所有的图标都打包成字体库，减少请求
• 具有矢量性，（放大时）可保证清晰度
• 几乎支持所有的浏览器
• 移动端设备必备良药

字体图标的使用

• 下载字体图标
  • 推荐网站
    • iconmoon字库
    • 阿里iconfont字库
  • 将下载下来的fonts文件夹放到网页所在目录中
• 在 样式 中声明字体：即声明自定义的字体（直接复制下面的代码到样式表中）

  @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?mcsslk');
  src:  url('fonts/icomoon.eot?mcsslk#iefix') format('embedded-opentype'),
  	  url('fonts/icomoon.ttf?mcsslk') format('truetype'),
          url('fonts/icomoon.woff?mcsslk') format('woff'),
          url('fonts/icomoon.svg?mcsslk#icomoon') format('svg');
    font-weight: normal;
  font-style: normal;
}

• 给使用字体图标的盒子指定字符集

  span {
  	font-family : "icomoon";
  }

• 在盒子里面添加结构
  • 将下载下来的字体符号的文件夹中的demo.html打开，复制对应字体图标的符号粘贴到对应盒子中（这种方式有一个缺点，就是不够直观，光从代码上不知道使用的是哪个字体图标，所以多数使用下面的方式
• 还有另外一种使用字体图标的方式：
  • 使用 伪类 为元素添加内容，同时伪类是可自定义名字的，所以比上面的方式要直观，content是字体图标的编码

  • /*样式中写：*/
    .fa {
        font-family: 'icomoon';
    }
    
    .fa-play:before {
        content: '\ea1c';
    }
    /*给元素添加fa和fa-play类名，那么元素中就有了ea1c对应的字体图标，ea1c也是在下载下来的demo.html中复制的*/
    

上传字体包：将svg格式的图片转为字体图标

• 推荐网站：iconmoon字库
• 在网站中点击import icons上传图片，即可将图片转为字体图标，下载即可