一、讓用戶使用我設計的網頁字體
@font-face的好處:
當前網頁設計流行在網頁中的標題、Logo和題目中使用非網頁安全字體。這就意味着如果我們使用沒有預裝在用戶電腦的字體時,我們必須使用一些方法來解決這個問題,如使用背景圖片來替換。@font-face 是CSS中的一個功能,它允許在網頁中顯示指定的字體,即使用戶的電腦中沒有安裝該字體。這就意味着設計師和開發人員可以不用考慮web安全字體,如預裝在用戶電腦中的,Arial、Time New Roman、Verdana 和 Trebuchet等字體。使用@font-face,我們可以避免隱藏標題和花費更多時間去做每一張背景圖片,只需要在服務端放置一個字體,節省了時間和帶寬。
那么如何才能生成對應字體的EOT文件呢?查閱資料后,找到了三個方法:
方法一:在線轉換
1、在線字體轉換:Font Squirrel http://www.fontsquirrel.com/fontface/generator
這個網站為我們提供了一個在線的字體轉換服務,缺點是對於字體文件的大小有限制,適合用來轉換英文類的字體。
下面這個轉換能轉換文件比較大的字體文件,比如中文字體庫一般都比較多,常用6000個漢字一般都在10MB多。
http://ttf2eot.sebastiankippe.com/
方法二:使用ttf2eot。
ttf2eot 是一個開源項目。支持Linux和Windows的環境,能夠快速的生成EOT文件。使用起來也非常方便。
注:這種方法我沒有使用過,其他方法都有驗證。
方法三:Microsoft WEFT。
Microsoft WEFT是微軟推出的一款用來解決網頁字體問題的軟件。這款軟件能夠分析你的網頁中調用了哪些字體(應當是通過css判斷出來)然后會從系統中選擇對應的字體進行轉換,生成的EOT文件,也會根據頁面中用到的字體情況進行縮減,所以生成的文件比較小。我認為非常適合用於中文類字體的生成。
具體的操作該工具推薦一篇博文:http://archive.cnblogs.com/a/2011475/
Microsoft WEFT 工具下載:
http://www.microsoft.com/typography/web/embedding/weft3
使用@font-face
使用@font-face很簡單,你只要簡單地在樣式表中包含@font-face的設置,鏈接字體文件,像鏈接一張圖片一樣。
@font-face { font-family: DeliciousRoman; src: url(/Delicious-Roman.otf); }
然后,如果要設置h1中的字體,就像下面的例子:
h1 { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; }
@font-face的兼容性
IE支持@font-face已經有好多年了,而FF(火狐)到3.5版本才支持,是最后一個主流瀏覽器支持@font-face。
根據NetMarketShare最新的統計,我們可以得到最少92%的瀏覽器都支持@font-face。
以我看來,更高安全級別的瀏覽器都將支持@font-face,因為許多非IE用戶和許多非流行web瀏覽器被包括在統計內。許多剩下來的8%用戶應該是移動用戶。IPhone和iPat一樣都支持@font-face。
@font-face文件的格式
為了滿足92%的用戶,我們需要參考以下的文件格式:
IE所有版本:EOT
Safari (3.2 ): TTF / OTF
iPhone (3.1) SVG
Chrome (all versions): SVG (TTF/OTF 添加於20101月25日)
Firefox (3.5 ): TTF/OTF (.WOFF 添加於 3.6 版本)
Opera (10 ) TTF/OTF
所以,.eot .ttf 或者 .otf .svg .woff是最好的兼容組合。
建議使用方法一中的 Font Squirrel 生成的實例,來研究兼容性問題。在該網站中上傳一個字體庫文件(可以在這個網站上下載一個),生成一個壓縮包,里面包含了一個實例,見下圖。
二、在線字體
谷歌提供了非常多的在線字體,對於一些特殊字體的應用,用谷歌現在字體是個很不錯的選擇。地址:http://www.google.com/webfonts,
可以看到谷歌提供的字體是非常多的,不過只提供英文字體,中文字體由於字體庫文件動輒10幾20兆以目前的網速實現在線中文字體,顯然得得不償失。所以使用自己設計的字體時也要注意這個問題。
在線字體的使用:
a.找到想要引用的Google字體,見下圖:點擊想要引用字體的 “Add to Collection",在點擊右下角的"Use",找到應用地址
b.在頁面引用谷歌提供的CSS文件:<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
c.設置字體:比如h1{ font-family : Chango;}
說明:在線字體其實也就是上面《一、讓用戶使用我設計的網頁字體》的內容,只不過谷歌給我們封裝好了,只要引用就可以了。
三、生成圖片水印、驗證碼文字的字體
在ASP.NET生成圖片時中常使用到生成水印文字,生成驗證碼文字等,這些圖片上的文字有時候我們需要設置更好看的字體,實現的方法一般是調用服務器C:/windows/fonts/ 目錄下的字體,對於服務器中沒有的字體就需要我們在服務器上面安裝,顯然不是很方便。另外一中方法是:把字體庫文件放在我們的項目中,生成圖片中的文字時調用項目的字體庫。但是,這種方法使用具有局限性,對於WEB頁面的字體就無能為力了。關於WEB頁面調用自定義的字體,詳見上面的《一、讓用戶使用我設計的網頁字體》 。
a. 下載字體文件,並加入到項目中,例如:有一個項目的登錄驗證碼功能用到的字體是“Andy”字體,這里就需要下載Andy的字體庫,“andyb.ttf”。
b. 把字體庫加入到項目中,例如:加入到根目錄下的“Share/Fonts/”下面。
c. 在生成驗證碼的后台文件中,創建的字體,這里創建一個方法來生成一個自定義的字體。
/// <summary> /// 創建一個定義的字體,這個字體是程序級別創建的 /// </summary> /// <returns>返回:字體,這里為Andy字體</returns> private Font CreateFamily() { PrivateFontCollection pfc = new PrivateFontCollection(); //string fontpath = HttpRuntime.AppDomainAppPath + "Share/Fonts/andyb.ttf"; //這種方法也能獲取到項目的絕對路徑,所以還要加上文件的相對路徑 string fontpath = System.Web.HttpContext.Current.Server.MapPath("~/Share/Fonts/andyb.ttf"); //獲取字體路徑 //pfc.AddFontFile(@"C:/windows/fonts/andyb.ttf"); //這種方法是獲取服務器中的字體,不過需要服務器字體庫中存在改字體文件 pfc.AddFontFile(fontpath); //添加到字體 Font font = new System.Drawing.Font(pfc.Families[0], 20, System.Drawing.FontStyle.Bold); //創建一個自定義的字體 return font; }
關鍵三個地方:
1.PrivateFontCollection 類命名空間在 System.Drawing.Text 下面這個方面提供一個創建字體庫的數組對象,
2.需要通過絕對路徑獲取字體庫的路徑這里提供兩種方法:
Application.StartupPath+"Share/Fonts/andyb.ttf"
System.Web.HttpContext.Current.Server.MapPath("~/Share/Fonts/andyb.ttf")
3.創建一個Font字體
注意:這種方法也可以獲取C:/windows/fonts/ 目錄下面的字體,前提是字體存在的情況下。
說明:如有不合理之處,敬請指點!
引用地址:
1. http://archive.cnblogs.com/a/2011475/
2. http://www.mei0.com/css/2443.html