舉個例子：
format 是一個可選參數，他的作用是提示該資源 URI 所引用的字型格式，關于字型格式，可以看下面清單：
format 格式
Font 格式
字尾名
truetype
TrueType
.ttf
opentype
OpenType
.ttf, .oft
truetype-aat
TrueType with Apple Advanced Typography extensions
embedded-opentype
Embedded OpenType
.eot
svg
SVG Font
.svg, .svgz
這堆麻煩的字型格式的出現，是因為各種浏覽器對他們的支援程度不一樣：
浏覽器
支援類型
IE6,7,8
僅支援 Embedded OpenType(.eot) 格式。
Firefox 3.5
支援 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6
支援 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera
支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
從網頁資源清單中可以檢視到該網頁使用了多種字型：
編碼和字型沒有關系，但編碼和字元是一一對應的，比如 "\u674e" 對應的是 “李”，"\u9756" 對應的是“靖”。而字型在這裡有個什麼對應關系呢？不同的字型中顯示同一個 unicode 編碼，看到的效果是不一樣的，我們可以讓正楷的 "李" 對應 "\u674e"，也可以用行楷對應，當然我們也可以用一張圖檔來對應。Web Icon 也就是用圖檔來對應一些 unicode 碼。
但是這裡存在一個問題，我們用一張圖檔來對應 “李” 字，倘若想輸入一個正常的“李”字，該怎麼去對應呢？ Unicode 包含 0-0x10FFFF 共 1114112 個碼位，而漢字占用的碼位并不多，隻有幾千個，在制作 webIcon 時可以選擇避開常用的字元集。當然， Unicode 編碼也給我們提供了碼位的專用區（Pricate Use Area），區間是 E000-F8FF，是以我們可以在這個字元集中放肆 DIY 屬于我們自己的字型。
Web Icon 的制作，網上有很多線上工具，不過這些線上工具都是從已有的圖檔中選擇對應關系，限制性比較大，fontCreator 是一款比較優秀的字型制作工具，它能夠很智能的将我們導入的圖檔轉換成黑白色的位圖，我們可以編輯和修改各個位圖區域，按照自己的意願 DIY。
打開 fontCreator，建立一個字型：
為了友善示範，我隻保留了 A-Z 的字元，其他的全部删除了。
選中 A ，右擊選擇導入圖檔：
選擇 generate，生成字元内容，然後輕按兩下 A，進行細節的編輯（放大，平移）：
依次處理其他幾個字母。Ctrl+S 儲存為 barret.ttf。P.S：由于導入表情調整大小位置過于繁瑣，我隻做了 A-I 這幾個碼位對應的符号，測試的時候使用字母 A-I 測試即可~
為了友善本地測試，我們先安裝這個字型：
打開記事本，選擇字型為 barret，字号調大一點，輸入 BCDEF 等字元，看看效果：
是不是驚呆了，呵呵~
網頁測試之前，需要先轉化下格式，至于原因在前言部分我已經說了。我們拿到的是 ttf 的字型格式，為了相容所有的浏覽器，必須修改進行格式轉換。
轉換的拿到的是下面四個檔案：
用下面一段代碼測試下結果：
根據 CSS3 草案中的描述，'@font-face' 規則允許使用連結到需要時自動激活的字型。這使得使用者可以使用線上的字型，而不僅僅拘泥于使用使用者端系統内的字型。font-face，拆開來了解，字型的面孔。不管是什麼樣的面孔，對應的還是同一個碼位，而網頁設計者需要使用不同的字型來比對目前的設計。
上面的教程中我給出了兩個測試，一個是本地測試，一個是網頁測試，本地測試之前需要先安裝字型，如果本地已經有 barret 這個字型了，那我們的程式便沒有必要在重新去網絡上下載下傳這個字型了。這是 CSS 程式應該這樣寫：
在解析的時候，會先從本地查找是否有 barret 字型，如果沒有就忽略 local 語句，如果有的話就直接應用，忽略後面的 url 參數。除了擷取本地字型的作用之外，他還有另外一個 hack 用途，看下面這段程式：
代碼中包含 local("")，local 中是一個笑臉，很顯然，這絕對不是一個字型名字，那他的作用是什麼呢？前面我們說了，低版本IE 隻支援 eot 檔案格式的字型，上面的代碼中用到了兩個 src，低版本IE會應用第一個 src 的結果，但是，他的解析不會在第一個 src 位置停止，而是繼續往後讀，看到後面的 src 會發送一個無效的 http 請求。若在 url 前加一個 local 可以阻斷這個 http 請求的發送。
他的作用是定義字型支援的 Unicode 字元範圍，以 "U+" 或者 "u+" 開頭，預設是 "U+0-10FFFF"。
unicode-range 有三種形式：
點，e.g. U+416
分段，e.g. U+400-U+4ff
通配符，e.g. U+4??(U+400-U+4FF)
舉幾個例子：
大小寫字元以及标點符号
大小寫字元和數字
小寫字母，大寫字母 T，和 "." 号
這玩意兒有啥用途呢？
<code>@font-face</code> 有相關屬性 <code>unicode-range</code>，可用類似這樣的一段 CSS 來指定以中文字型顯示彎引号（這是 CSS3 特性，支援還不廣泛，但對于這種非關鍵樣式來說夠用了）：
同理，這一招也可以用于破折号、間隔号等和西文标點共享碼位的中文标點。
優點有一大堆，圖示的顔色可以随意修改，大小也是可以随便控制的，不需要折騰圖檔與文字的對齊問題，因為他本身就是文字，還可以使用陰影、文字漸變等 CSS3 的效果，總之就像操作一般字型一樣處理他們，該有的特點都有。
缺點也是十分明顯的，慢速網絡以及FQ代理下情況特别糟糕。外國很多網站的頁面都使用了網絡字型，而網絡字型下載下傳是需要時間的，有些字型可能還比較大，在下載下傳完畢之前，頁面有文字的地方都沒有渲染出來，體驗不好的情況需要等待三五秒中。不過這種情況還是可以優化的，先用一般字型頂替樣式，等下載下傳完畢了再利用 JS 來重新渲染，不過這個代碼比較高，而且也不好判斷何時下載下傳完成了。
本文的目的是展示 web icon 的從無到有的一個過程，一些網站提供了很多不錯的 webIcon 字庫，如果有需求可以直接去網站上下載下傳，自己制作的話成本太高。
本文轉自Barret Lee部落格園部落格，原文連結：http://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html，如需轉載請自行聯系原作者