高级css技巧 - 2.字体图标 - 《前端入门 Html5 Css3 移动Web_》

字体图标产生和优点
字体图标的优点
字体图标下载
- 推荐下载网站：
字体图标的使用
- 以icomoon为例
- 以阿里图库iconfont为例
字体图标的追加

字体图标产生和优点

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点，但是缺点很明显。

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是 字体图标 iconfont。

字体图标 可以为前端工程师提供一种方便高效地图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标下载

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

字体图标的下载
字体图标的引用（引入到HTML页面中）
字体图标的追加（以后添加新的小图标）

字体图标的使用

以icomoon为例

视频：

点击create Font

再点击Download
→
下载完毕之后,注意解压后的文件不要删,后面会用。

1.把下载包里面的 fonts 文件夹放入页面根目录下

不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。

TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体 ,支持这种字体的浏览器有IE9+、Firefox3.5+.
Chrome4+、Safari3+、 Opera10+. iOS Mobile、Safari4.2+ ;
2. Web Open Font Format(.wof)格式woff字体,支持这种字体的浏览器有IE9+、Firefox3.5+、 Chrome6+、
Safari3.6+、Opera11.1+ ;
3. Embedded Open Type(eot)格式.eot字体是IE专用字体,支持这种字体的浏览器有IE4+ ;
4. SVG(svg)格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+.
Opera10.0+、iOS Mobile Safari3.2+ ;

在CSS样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径url的问题。
还

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

有不要记上面的代码，从icomoon文件夹中的style.css里可以看

然后打开demo.html文件
打开后，复制，要哪个就复制哪个。

下面写到代码中。

这里的框框就是刚才复制的
到css
.one {
font-family: ‘icomoon’;
}
用一下，font-family: ‘icomoon’;

ok

全部代码：

<!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: 'icomoon';
      src: url('fonts/icomoon.eot?wzua0n');
      src: url('fonts/icomoon.eot?wzua0n#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?wzua0n') format('truetype'),
        url('fonts/icomoon.woff?wzua0n') format('woff'),
        url('fonts/icomoon.svg?wzua0n#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    .one {
      font-family: 'icomoon';
    }
  </style>

</head>

<body>

  <span class="one"></span>

</body>

</html>