通常css使用font-family指定客戶端顯示字型的樣式，本筆記目的在於解決客戶端未安裝指定字型，導致無法完成設計效果要求。與此同時現在大部分圖示使用字型格式，因為它有向量，體積小等等優點講解如何使用字型圖示

下面是詳細的方法步驟：

1、製作或下載字型檔案

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、使用字型檔案

[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