font-face 自訂字型

在前端實現美工圖的時候，總會碰到一些設計字型，系統裡面一般不會內建的。通常情況下多數用以圖換字的方式實現，這種方法也很實現大部分的需求。

but，總有些例外存在，比如當你需要對這些文字進行大小縮放的操作，但如果縮放圖片時可能會失真，這裡就可以用自訂字型了。

but，又有一個但是（以下文字引用 http://www.nowamagic.net/librarys/veda/detail/1356）

在網頁中嵌入非系統內建字型，雖然技術上能實現，但是對國內來說，沒有太大的實際意義，因為一個中文體檔案起碼20M+，而且各個瀏覽器支援的字型檔還都不一樣，也就是說，在伺服器端必須有2-3個不同格式的字型檔，用來應付各個瀏覽器，可以看下下面這張對應圖。

 

首先，我們要找到這個字型，因為這個字型只有ttf格式的，所以我們需要轉換出其他各種不同的格式，至於如何轉換，有軟體，有線上，比如：FontsQuirrel、onlinefontconverter

轉換好後，就可以編寫css代碼了。首先在CSS裡先聲明這種字型：

@font-face {    font-family: 'hooray';  /*給自訂字型命名*/    src: url('hooray.eot');    src: url('hooray.eot?#iefix') format('eot'),         url('hooray.woff') format('woff'),         url('hooray.ttf') format('truetype'),         url('hooray.svg#webfontjKg17VrE') format('svg');}

聲明完了就可以像其它字型那樣使用了：

p{font: 13px hooray,Arial}

-------------------------分割線------------------------------------

 這種用法估計我工作不需要用到，只是記錄下。

提供一個執行個體：http://ux.etao.com/page2012 （頂部的大圓“年度回憶2012UX”就是用的自訂字型，因為有縮放效果，直接把美工字弄成字型會很方便許多，控制font-size就可以）

文章參考：http://www.nowamagic.net/librarys/veda/detail/1356

　　　　   http://laob.me/custom-web-fonts/

　　　　　http://www.2hjob.com/co/news/font.htm