css 使用@font-face 嵌入自定义字体或字体图标方法笔记

通常css使用font-family指定客户端显示字体的样式，本笔记目的在于解决客户端未安装指定字体，导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式，因为它有矢量，体积小等等优点讲解如何使用字体图标

下面是详细的方法步骤：

1、制作或下载字体文件

由于浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，所以需要转换出多种字体格式文件以便兼容尽可能多的浏览器

2、使用第三方平台转换字体文件为font-face所支持的格式

TureTpe(.ttf)格式：
OpenType(.otf)格式：
Web Open Font Format(.woff)格式：
Embedded Open Type(.eot)格式：
SVG(.svg)格式：

步骤为先上传图片字体文件，然后选择要转换的几种格式下载

3、引入字体文件

@font-face {
  font-family: "FamilyName";
  src: url("path.eot");
  src: url("path/to/*.eot?#iefix") format("embedded-opentype"), 
  url("path/to/*.woff") format("woff"), 
  url("path/to/*.ttf") format("truetype"), 
  url("path/to/*.svg#FamilyName") format("svg");
  font-weight: normal;
  font-style: normal;
}

FamilyName 会在刚刚下载的文件中的css文件中有，你可以直接使用下载文件不用再定义样式，我这里是为说明原理所以不使用下载的css

4、使用字体文件

a、 字体：
直接style="font-family:FamilyName" 或直接class 内定义使用到指定元素上
b、 图标：
定义通用图标样式

[class*="foundicon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
}

[class*="foundicon-"]:before {
  font-family: "FamilyName";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
}
[class*="general foundicon-"]:before {
    font-family: "FamilyName";
}

定义图标：

.foundicon-thumb-up:before {
  content: "\f000";
}

.foundicon-thumb-down:before {
  content: "\f001";
}

…………

使用：

<i class="general foundicon-thumb-up"></i> 

参考博客：

http://blog.csdn.net/chelen_jak/article/details/19125507