一.首先我們下載需要的自定義字型

二.在工程中匯入自定義字型包fonts

三.在css檔案中引用自定義字型

@font-face{
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?axvffw');
    src:url('../fonts/icomoon.eot?axvffw#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?axvffw') format('truetype'),
        url('../fonts/icomoon.woff?axvffw') format('woff'),
        url('../fonts/icomoon.svg?axvffw#icomoon') format('svg')
 
;
        font-weight: normal;
        font-style: normal;
}

　　1.屬性的作用

　　　　font-family:自定義字型的名稱

　　　　src:自定義字型的路徑

　　　　font-weight:自定義字型的粗細

　　　　font-style:自定義字型的樣式

　　　　format:字型的格式 主要用於瀏覽器識別,通常有以下幾種:truetype opentype truetype-aat embedded-opentype avg等

　　2.瀏覽器相容寫法:

　　　　TureTpe(.ttf)格式：

　　　　　　.ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，因此他不為網站優化,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

　　　　OpenType(.otf)格式：

　　　　　　.otf字型被認為是一種原始的字型格式，其內建在TureType的基礎上，所以也提供了更多的功能,支援這種字型的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

　　　　Web Open Font Format(.woff)格式：

　　　　　　.woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援元資料包的分離,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

　　　　Embedded Open Type(.eot)格式：

　　　　　　.eot字型是IE專用字型，可以從TrueType建立此格式字型,支援這種字型的瀏覽器有【IE4+】；

　　　　SVG(.svg)格式：

　　　　　　.svg字型是基於SVG字型渲染的一種格式,支援這種字型的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

　　　　這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字型，甚至還需要.svg等字型達到更多種瀏覽版本的支援。

四.自定義字型的使用

　　現在就可以直接使用自定義字型了,可以在程式碼中直接設定font-family,呼叫自定義字型了

.pos{
    color:#f10215;
    font-family: 'icomoon';
    font-style: normal;
    font-size: 15px;
}

　　如果要使用字型符號

　　這裡需要用到一個線上轉換網站http://fontstore.baidu.com/static/editor/index.html

　　　　選擇開啟,選擇使用的自定義字型,然後我們會看到各種各樣的字型引用符號

　　這時,我們在程式碼中插入

<div class="JD_event">
       <a href="#" class="w">
            <i>&#xea0f</i>
       </a>
</div>

　　　　這裡面的&#xea0f就是用到的自定義字型

　　　　開頭以&#x開頭,後邊加上圖中&後邊的內容就可以實現自定義字型的引用了