ASP.NET 與字體


一、讓用戶使用我設計的網頁字體

 

 @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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM