解決網頁中使用自定義中文字體的方法

　　英文字體自定義

　　中文字體自定義

　　上面的兩個圖片例子，展示了自定義字體在網頁裡面的應用，這裡不是浏覽器的字體，也不是客戶電腦裡安裝的字體，也不是圖片或其他方式，而且是以文字的方式顯示，這樣做的好處是有的，最簡單的好看啊，再比如可以方便修改，重要的是利於SEO優化。好處不多講，先講講如何實現。

　　首先，要准備字體，要使用字體的三種文件格式，確保能在主流浏覽器中都能正常顯示該字體。

　　下面是幾種主流浏覽器對於字體格式的支持情況：

　　.TTF或.OTF，適用於Firefox 3.5、Safari、Opera

　　.EOT，適用於Internet Explorer 4.0+

　　.SVG，適用於Chrome、IPhone

　　獲取到三種格式的字體文件後，就可以使用CSS的@font-face屬性來調用字體了

　　代碼如下：

　　@font-face {

　　font-family: ‘fontNameRegular’;

　　src: url(‘fontName.eot’);

　　src: local(‘fontName Regular’),

　　local(‘fontName’),

　　url(‘fontName.woff’) format(‘woff’),

　　url(‘fontName.ttf’) format(‘truetype’),

　　url(‘fontName.svg#fontName’) format(’svg’);

　　}

　　這樣簡單兩步就實現了，不復雜的，但是如果你真認為這樣就搞定了，那就沒有這篇文章存在的必要了。

　　這裡存在一個問題，如何獲取某種字體的這三種格式文件呢?一般地，我們使用下載的特殊字體，最常見的是.TTF文件，通過TTF文件我們可以通過網站Font Squirrel或Online Font Converter提供的在線字體轉換服務獲取。我自己用的是Font Squirrel，它允許我們選擇需要的字符生成字體文件，這樣就大大縮減了字體文件的大小，使網站性能更強。該網站不支持1M以上的字體文件轉換。至於如何使用這個網站，網上大把的有，自己去看吧。

　　需要注意的是這裡字體文件不能超過1M，這樣對於英文字體沒有什麼問題，畢竟英文字體就26個字母，加上一些符號，幾十KB就可以搞定，但是對於中文字體，恐怕這種方法就不適用了，中文字體動不動就是幾M，有的甚至10M以上，對於中文字體網站Font Squirrel是無能為力的，就算能轉換，一個網站因為一個自定義的字體，而增加幾M的流量是很不明智的選擇。

　　那麼這種情況下，對於中文字體，我們需要從字體中挑出網站必須的那些文字，然後做成自己的字體，一般百來個漢字差不多了。

　　從字體中挑出我們需要的文字，字體編輯軟件The Font Creator必不可少了，先看下軟件長啥樣。

　　這裡就是我最後挑出來的必須用到的文字。如何從字體文件裡面找出這些文字就是下一個問題了。這裡選編輯-》查找或者直接Ctrl+F,就會看到如下的界面了

　　選擇Unicode,這裡可以根據漢字的Unicode來定位查找我們需要的文字。至於漢字的Unicode，網上可是大把的資源可以找到，隨便百度一個http://www.nengcha.com/soucha/code/unicode/class/，比如我找“方”，對應的Unicode是“65B9”，那在美元符後面輸入“65B9”，點查找，就可以定位到方了，這樣我們想要哪個字，就很快能找到，你可以拷貝出來新建一個字體，也可以將字體文件裡面其他不要的字體刪掉。可以先把我們需要的字全部找出來，然後根據Unicode排個序，怎麼排序，恐怕又有這個問題了，最簡單的，就是通過剛才說到的網站http://www.nengcha.com/soucha/code/unicode/class/，這裡一次最多可以輸入100個字，出來就是按Unicode排序的，很方便，一個一個的找，中間部分全部刪掉，是不是容易多了。

　　到這裡基本上一個瘦身過的.ttf的字體文件就搞定了，再回到網站Font Squirrel去生成其他格式的文件吧。後面的事就沒什麼說的了