問題描述：

????? 產品展示的界面上有個產品編號，由后臺程序動態生成，如圖

????? 而"875"的字體是特殊字體，如果客戶端系統上沒有安裝該特殊字體，就達不到原設計效果。

解決辦法(我認為的三種)：
1。通過FLASH實現，但是小小的幾個數字用FLASH來做不是很劃算，
2。用小圖標，在后臺添加產品的時候順序上傳一張該產品的編號圖標。
3。通過字體文件映射到客戶端系統來實現

主要通過@font-face，解釋如下：

@font-face { font-family : name ; src : url( url ) ; sRules }
設置嵌入HTML文檔的字體。
嵌入HTML文檔的字體是指將OpenType字體（壓縮的TrueType字體）文件映射到客戶端系統，用來提供HTML文檔使用該字體，或取代客戶端系統已有的同名字體。

示例字體：11PXBUS.ttf

步驟：
(1)服務器端先安裝"11PXBUS.ttf”字體.
(2)通過Microsoft的"Microsoft WEFT”工具生成" .eot " 的字體(貌似不是每種字體都能生成，而且有的生成的eot文件太大),

??? 這里我通過"11PXBUS.ttf”字體生成了"11PXBUS.eot".
?????
(3)在CSS中自定義字體("11PXBUS.eot"字體和生成的"11PXBUS.ttf"在images文件夾中)
@font-face{
??? font-family:myfont1;
??? font-weight: bold;
??? src: url(../images/11PXBUS.eot);
}
@font-face{
??? font-family:myfont2;
??? font-weight: bold;
??? src: url(../images/11PXBUS.ttf);
}

(4)需要用到特殊字體的地方調用
??? #content{font-family:"myfont1","myfont2";}

??? 這樣客戶端沒有裝這個字體的時候，就可以自動映射對應的字體。

??? 這里定義了兩個字體，myfont1是為了兼容IE6、7、8，myfont2兼容FF3.5等，具體看下圖支持情況?

.eot格式：

?

.ttf格式：

圖片來源：http://www.web600.net/

?

附：FF不顯示設置的字體：
FireFox-->工具-->選項-->內容-->點選“字體&顏色”旁邊的“高級”-->勾選“允許頁面選擇字體而無需使用上面的設置”

轉載于:https://www.cnblogs.com/_dragon/archive/2010/04/29/1723916.html

總結

以上是生活随笔為你收集整理的@font-face的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。