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