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