[CSS]關於網頁中使用CSS中使用嵌入字型

分類: 工作雜談|技術分享 作者: Doris

20 一月 2012

一般來說在設計網站的時候,都是使用預設的系統字型來設計。但如果網站上英文、數字不使用一般系統原有字型。這樣就變成必需要使用另外嵌入的字型了。例如國外的一個服飾網站A&F的網站(如下圖):

這些字可不是圖片,真的是CSS嵌入字型完成的作品....而且IE6 ~ 9、Firefox、Safari、Chrome、Opera都可以正常顯示。但要滿足這麼多瀏覽器的情況,A&F是怎麼樣做到的呢?

正確的答案就是,使用@font-face!那@font-face要怎麼用呢?請看範例:

1. 先在css中定義要使用的字型名稱以及字型檔放置的位置

我們在A&F的CSS原始碼中查看到其中一個字型的@font-face設定如下:

@font-face{

font-family:'Trade Gothic Bold'; /** 這個是設定字型的名稱 **/

src:url('/anf/font/tradegothic-bold-webfont.eot'); /** 設定IE使用的EOT字型檔位置 **/

src:local('☺'),url('/anf/font/tradegothic-bold-webfont.woff') format('woff'),url('/anf/font/tradegothic-bold-webfont.ttf')
format('truetype'),url('/anf/font/tradegothic-bold-webfont.svg#webfontmlgY0et7') format('svg'); /** 設定firefox、chrome...等使用的字型檔放置的地方 **/

font-weight:normal;font-style:normal; /** 其餘的css設定 **/

}

我們可以發現,其實在使用@font-face的時候,「好像」需要很多不同類型的字型格式檔....但是,不要懷疑。因為各家瀏覽器在支援的字型格式不同的情況下,所以造成了必須要將希望正常顯示字型的瀏覽器都要設定的情況。
所以,要使用的時候,需要先將@font-face照前面的程式碼先設定好後,再用一般使用CSS設定字型的方式套用,如下方範例:

.changeType{

font-size: 30px;

font-family: "Trade Gothic Bold";
}

接下來會看到字型會被套上的樣子...(此字型是套另一個worldwideweb字型)

2. 那些瀏覽器支援什麼樣的字型檔?

基本上,因為常見到的瀏覽器有幾種:IE系列、Firefox、Safari、Chrome。基本上,這幾種瀏覽器都是需要正常顯示出來。初步測試後,支援字型檔的格式如下:

* IE6, IE7, IE8, IE9: 支援EOT字型檔。
* Firefox:支援otf以及ttf、woff
* Safari:支援svg、otf
* Chrome (Google 瀏覽器):支援svg、otf

3. 這幾個英文是什麼意思?

* EOT(Embedded OpenType): 由微軟制定並於2008年1月提交至W3C的字型規格。因為本篇不是在介紹字型格式,所以詳情可以看這邊了解格式的內容。

* OTF(OpenType):也是由微軟一開始制定,後來adobe也加入共同發展。字型規格

* TTF(TrueType):早期為了對抗Adobe的Type1 Postcript字體而由Apple、微軟共同開發的一種字體標準。字型規格

* WOFF(Web Open Font Format):2010年由Mozzila基金會、Opera、微軟一起送出的Web開放字型格式。

* SVG(Scalable Vector Graphics):這不是一種字型檔,而是基於XML的一種製造二維向量圖形的格式。由W3C制定,是一種開放標準。頁面請見此處

基本上只要特別注意提供支援的格式,其實你也做的到不使用系統預設字型來設計網頁!

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。