web字体
开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。不同浏览器所支持的字体格式是不一样的，所以有必要去了解一下有关字体格式的知识。
1、TureTpe(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+； 2、OpenType(.otf)格式 .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+； 3、Web Open Font Format(.woff)格式 woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+； 4、Embedded Open Type(.eot)格式 .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+； 5、SVG(.svg)格式 .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+； 了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。 下载字体的网站. 推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
web 字体使用：
生成字体：https://www.iconfont.cn/webfont#!/webfont/index 下载字体之后有使用流程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { font-family: 'webfont'; font-size: 30px; } /* 如果在网页中使用web字体（用户电脑上没有这种字体）*/ /* 声明字体 */ @font-face { font-family: 'webfont'; src: url('font/webfont.eot'); /* IE9*/ src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/webfont.woff') format('woff'), /* chrome、firefox */ url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } </style> </head> <body> <p>苍茫的天涯我的爱...</p> </body> </html>
- 字体图标
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？ 答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护； - Font Awesome 使用介绍：
http://fontawesome.dashgame.com/ - 定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/ - SVG素材
http://www.iconsvg.com/
- 图标字体使用跟字体差不多推荐去 https://www.iconfont.cn 上找。
