幾天前，在製作本站的線上字典服務的時候，在英文音標的字型上出了難題。百度的英文字典裡面是將音標做成了圖片，當輸出結果時將對應的音標圖片輸出，可我不想用這個方法。我想讓使用者直接能看到音標，又不用下載安裝字型，我想到了CSS裡有字型匯入的功能。
CSS的說明文檔裡有這樣一段：
@font-face版本：CSS2 相容性：IE4+
文法：
@font-face { font-family : name ; src : url ( url ) ; sRules }
取值：
name : 字型名稱。任何可能的 font-family 屬性的值
url ( url ) : 使用絕對或相對 url 地址指定OpenType字型檔
sRules : 樣式表定義
說明：
設定嵌入HTML文檔的字型。此規則無預設值。
此規則使你能夠在網頁上使用用戶端本地系統上可能沒有的字型。 url 地址必須指向 OpenType 字型檔案(.eot或.ote)。此檔案包含可以轉換為 TrueType 字型的壓縮字型資料，可以用來提供HTML文檔使用該字型，或取代用戶端系統已有的同名字型。此檔案可以使用 Microsoft WEFT 工具製作。
這樣，我們需要微軟的WEFT工具來完成。
Microsoft WEFT 工具說明頁(點擊查看)
Microsoft WEFT 工具(點擊下載)
字型內嵌示範
使用教程(E文)
簡單說明一下： 先建立一個htm空文檔，然後開啟WEFT，根據嚮導，添加剛才建立的htm檔案
然後下一步，會提示程式將分析系統字型，此時不要勾選skip analysis，繼續下一步，等程式掃描完畢，出現一個對話方塊，此時先不著急下一步，點"Add"按鈕，選擇一個需要製作的字型，只有TrueType的字型可以被製作，選好後下一步。 接著選擇，產生的ETO字型檔的儲存位置 下面這個選框比較重要，第一次就是因為沒弄清楚，導致無效。這裡要輸入字型允許被使用在哪些網站內。這個地方建議輸入兩個網域名稱，一個是：http://127.0.0.1，做為本機測試用，另一個是自己的網站的地址，如：http://www.imagecode.net，設定好後，再下一步直到完成。
這樣還不算完，找到產生好的EOT檔案，放在網站目錄裡，在需要使用這個字型的頁面裡，按照下面的方法操作。
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!--
@font-face { font-family: myfont; font-style: normal; src: url(ARIAL0.eot); }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE="myfont"> 測試文字</FONT>
</BODY>
</HTML>
最後要注意的是在@font-face的時候，font-family最好自己定義一個字型名稱，不要跟原生字型名稱一致。否則在<font face='myfont'>的時候，如果EOT字型載入失敗，有可能會使用系統字型來顯示，這樣自己就無法判斷是否CSS字型載入成功。其實，字型是否載入成功，在安裝了WEFT後，會自動彈出提示。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
