在好多項目中，都需要用到一些特殊的字型，但這些字型不是每個人都有的。當某個使用者的系統字型庫中沒有你預先設定的字型，這將使你的網頁效果大大折扣。切圖是解決辦法之一，當遇到如所示的情況的時候，顯然切圖並不是最佳方案。
我們再來看看穀姐的網頁，他們的導航就採用了切圖的方法，而他的背景是一張大圖片，當網速較慢的時候，就會出現如下的畫面，這讓人覺得很不和諧。鑒於此，css自訂字型在某些情況便可以發揮它的優點了。 下面我說一下如何?的：1.準備好你的字型，建議最好是.ttf，因為.ttf可以被高版本的chrome和ff3.0+直接調用，（暫時沒有找到資料說可以在css直接調用.fon）。 2.準備轉換.ttf到.eot的軟體，我暫時找到兩種：Microsoft Weft和ttf2eot（一個命令列程式）。據我的使用經驗，Microsoft
Weft是圖形化軟體，但如果轉換壓縮中文字型檔會失敗（其實不是報錯，只是轉不了），所以如果要轉換中文字型的就要用ttf2eot了。ttf2eot的使用方法非常簡單：將字型檔和本程式放在同一目錄，然後在cmd運行TTF2EOT <***.ttf> ***.eot就可以了。 3.把這兩個檔案都複製到你的專案檔夾中，在css檔案中輸入如下代碼，就可以在目前所有主流上顯示你的字型了：
@font-face{font-family:'yahei';src:url(../images/msyh.ttf); font-style:normal; font-weight:normal}
@font-face{font-family:'yahei';src:url(../images/msyh.eot);}
*{margin:0;font-family:'yahei';}
代碼解釋：font-family：字型的名稱，src：路徑，font-style和font-weight可以不寫，這根據你的需要；第一行是針對ff、chrome、opera、Safari瀏覽器的，第二行就是針對ie的。經我測試，如果第一行和第二行在同一個css檔案下，ff會失效，所以應該建立一個css檔案，把第二行寫入，然後用<!--[if IE]><link rel="stylesheet"
href="ie.css" type="text/css" /><![endif]-->匯入，就可以解決這個問題。 就這樣，任務完成！ 不過，Every coin has two sides，我總結了一下css嵌入任意字型的優缺點： 優點：對於英文網站來說，這是個很好的方法，因為英語只有26個字母，所以字型檔檔案再大也是有限的，所以如果你的項目是英文網站，或者做個英文的logo或者導航的話，這是個很好的方法，因為沒有了圖片，可以大大增加你的瀏覽速度。 缺點，如果是做中文網站的話，就不建議了，因為中文字型檔很大，10m-20m+很正常，這對於使用者體驗非常不利；當然你也可以弄一個製作ttf檔案的軟體(Font Creator Program)回來，這樣就可以修改字型庫的大小。不過，如果只是涉及到少量中文字型的話，這也是個不錯的方法之一，畢竟沒有了圖片。
