1.3.3 环境搭建
1、解压压缩文件，打开解压的文件夹（文件夹名每次下载略有不同）
2、将需要的字体图标存入 idea 对应位置
课外扩展：
TureType( .ttf ) 格式 .ttf 字体是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有
IE9+ 、 Firefox3.5+ 、
Chrome4+ 、 Safari3+ 、 Opera10+ 、 iOS Mobile 、 Safari4.2+;
Web Open Font Format( .woff ) 格式 woff 字体，支持这种字体的浏览器有 IE9+ 、
Firefox3.5+ 、 Chrome6+ 、
Safari3.6+ 、 Opera11.1+;
Embedded Open Type( .eot ) 格式 .eot 字体是 IE 专用字体，支持这种字体的浏览器有 IE4+;
SVG( .svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有
Chrome4+ 、 Safari3.1+ 、
Opera10.0+ 、 iOS Mobille safari3.2+
1.3.4 使用方式
1、打开 demo_index.html
2、选择 Unicode 或 Symbol 方式中的一种
3、以 Unicode 为例，根据网页提示，找到使用的关键代码
4、idea 中，html 引入 CSS 样式，并复制关键代码
5、查询图标对应的 Unicode 码，修改 span 中的转义字符值。
6、通过为 iconfont 设置字体大小，改变图标大小（因为字体图标属于字体，但 font-family 不要使用，无效果）
1.3.5 总结
字体图标可以解决精灵图修改难、图片大的问题，通常和精灵图结合使用，解决网页图标问题。
精灵图：负责页面通用的各种大中型彩色图标图片
字体图标：负责页面快速显示的各种小型图标图片
2. 拓展知识
2.1 文字阴影
字体图标允许我们为文本添加阴影。
格式：text-shadow：X 轴偏移 Y 轴偏移 模糊程度 阴影颜色;
text-shadow: 5px 5px 5px #FF0000;
2.2 元素变成圆形
元素可以在表现形式上通过 CSS 样式调节，变为圆形：
格式： border-radius :百分比;
注意：
1 、 0% 是四边形， 50% 是圆形。 0%~50% 之间是圆角四边形
2 、占用的标准流位置仍为四边形
示例代码：
2.3 截图整个网站
1、先把滚动条拉倒网页最底部
2、页面上，鼠标右键，“检查”
3 、 ctrl+shift+P 呼出输入框
4、输入：capture full size screenshot ，敲回车
5、截图后，弹出窗口，提示网页截图保存位置
