【O專欄】CSS 3：網頁外觀新衝擊之字型篇

【編按】O專欄又來了，這次謝子斌先生為我們介紹CSS3規範中的網路字型（Web fonts）。要是你自己有部落格，而且對於CSS基本語法有所了解，就可以利用這個功能將字體上傳到網路空間，利用這項屬性指定字型，打造出在任何平台、支援瀏覽器下都一樣美觀的版型。就讓我們一起來學著怎麼做！

CSS是什麼？

相信大家對CSS應該不會陌生，由於它所帶來的便利性，也成為大家所逐漸普遍使用的網路標準。CSS英文原為Cascading Style Sheet，指的是層疊樣式表，是由W3C所定義和維護的標準之一。如果說HTML負責的是網頁結構，而CSS則為網頁提供設計。如此便可以把網頁的結構和設計分開，讓網頁開發人員專注負責網頁的結構和內容，網頁設計師則可以安心用CSS給網頁作設計。這樣不只簡化了網頁的結構，同時也強化了程式碼的可讀性以及可維護性(maintainability)。每當網頁改版時，設計師只要更改CSS文件即可影響整個網頁的設計，而不需一個個的去改。

CSS目前的版本是CSS 2.1，下一代CSS是CSS 3，但目前W3C仍在修改及定義CSS 3。不過慶幸的是，許多CSS 3的屬性已經可以被運用了。網路字型(web fonts)是其中一個。

網路字型實作與範例

網路字型給網頁設計師帶來前所未有的便利。以往設計師受限於用戶電腦上所支援的字型，通常可供選擇字體都非常有限，例如Arial、Times New Roman、新細明體等。另一方面不同語言的作業系统也可能內建不一樣的字型。這也導致用戶在不同語言環境的作業系统下，會看到不同字型的顯示。過去，有的設計師乾脆將文字轉變成圖形，來避免這樣的情形發生，可是卻造成了網頁更新的不便。而現在，網路字型可以讓設計師自由選擇字型，不再受限於操作系統的字型。設計師可以定義想要的字型，並且從其所指定的網址下載並顯示。

接下來讓我舉幾個不同的實際應用例子。

範例１：如何在CSS上套用網路字型

在CSS文件中，我們透過CSS的@font-face屬性，以font-family來定義字型的名稱，同時以src:url來定義字型的存取點。指令如下：

@font-face
/* Free font from: http://mplus-fonts.sourceforge.jp/ */
font-family: mplus;
src: url(mplus-1p-bold.ttf) format(”truetype”);
}

@font-face {
/* Free font from: http://hp.vector.co.jp/authors/VA039499/ */
src: url(MakibaFont13.ttf) format(”truetype”);
font-family: “Makiba”;
}

▲套用日文網路字型的網頁，整體的感覺更活潑。
重要的是，不論訪客電腦中有無安裝這個字型，都能正常顯示。（範例）

範例２：如何在SVG上套用網路字型

接下來，我們來看看網路字型如何運用在SVG （Scalable Vector Graphics,可縮放向量圖形）中。

▲可到這裡觀看。出現在SVG格式圖檔中的文字可以被選取、複製與貼上。
左下角灰色區塊是即是以滑鼠所選取的區域。

在這個李小龍為主題的SVG格式的圖檔，有兩種不同字型，一個是李小龍背景的字體，另外一個則是英文Bruce Lee。兩種字型都可以選取、複製與貼上；而且背景的字體還有著移動的動畫效果。筆者用的中文字型是王宗漢字型，是來自台灣的網路免費資源，在此至上謝意。套用的指令如下:

@font-face {
src: url(wts43.ttf) format(”truetype”);
font-family: “chinese_font”;
}
@font-face {
src: url(maxi_l_s.ttf) format(”truetype”);
font-family: “maxi”;
}

有一點必須特別注意的是，由於中文字型字量較多，這也導致了下載時間較長。因此在選擇中文的網路字型時，必須慎重考量，盡可能選擇一些檔案較小的字型。

範例３：網路字型也可做特效

▲利用SVG的功能，網路字型成為了整體設計的一部分。
範例請看這邊，建議使用Opera 10觀看。

在這個例子，我們利用SVG畫出了一個旋轉字型(spiral)。在套用網路字型後，旋轉裡的字也是可以自由的被選取、複製或是貼上。

▲網路字型可結合多重的文字陰影與RGBA來實現半透明效果，突顯文字，範例請見這邊。

另一個特效是陰影。筆者的同事Andreas愛好攝影，他將他的名字嵌入他的作品之中，標示版權所有。利用網路字型，他選擇了多重的文字陰影（text-shadows），結合RGBA語法來實現半透明效果，將「版權所有」文字更形突出。這裡的網路字型是使用CC Red Alert，是一個表現「像素(pixel)感」文字的網路字型。套用的指令如下:

@font-face {
src: url(ccredalert.ttf) format(”truetype”); /* http://www.dafont.com/c-c-red-alert-inet.font */
font-family: “ccredalert”;
font-style: normal;
}

總結

CSS 3的網路字型可以讓設計師擺脫以往受限於系統字型，提供多種不同的字型選擇，讓網頁整體設計活潑、富有變化。網路字型可以單獨被使用，同時也可以在如SVG的圖形下使用，並製造特效，讓網站設計更突出、更具風格。目前最新版的瀏覽器中，Apple Safari（Webkit引擎）、Firefox以及Opera 皆已逐步支援CSS 3中網路字型這項屬性。

更多資源請參考:

• 網路字型的應用文章（英文版）

作者簡介：謝子斌 ／Zi Bin, Cheah
馬來西亞華人，網路標準專家。長期從事網際網路標準研究，經常來往於中國、印尼、馬來西亞、北歐等地宣導。現於挪威Opera軟體公司奧斯陸總部擔任網路標準講師（Web Evangelist）。（Twitter、個人網站）