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

【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、新細明體等。另一方面不同語言的作業系统也可能內建不一樣的字型。這也導致用戶在不同語言環境的作業系统下,會看到不同字型的顯示。過去,有的設計師乾脆將文字轉變成圖形,來避免這樣的情形發生,可是卻造成了網頁更新的不便。而現在,網路字型可以讓設計師自由選擇字型,不再受限於操作系統的字型。設計師可以定義想要的字型,並且從其所指定的網址下載並顯示。

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

範例1:如何在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”;
}

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

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

範例2:如何在SVG上套用網路字型

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

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

▲可到這裡觀看。出現在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”;
}

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

範例3:網路字型也可做特效

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

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

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

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

▲網路字型可結合多重的文字陰影與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中網路字型這項屬性。

更多資源請參考:

【O專欄】CSS 3:網頁外觀新衝擊之字型篇作者簡介:謝子斌 /Zi Bin, Cheah
馬來西亞華人,網路標準專家。長期從事網際網路標準研究,經常來往於中國、印尼、馬來西亞、北歐等地宣導。現於挪威Opera軟體公司奧斯陸總部擔任網路標準講師(Web Evangelist)。(Twitter個人網站

謝子斌(Zi-Bin)
作者

目前Opera挪威總部擔任Opera網路宣講師,在世界各地宣講網路標準技術,包括HTML5、CSS3等。此外也於W3C擔任HTML小組成員、HTML5中文小組主席。

使用 Facebook 留言
189cd9dfc40aa585367d656296e625e4?size=48&default=wavatar
2.  CHCOOBOO (發表於 2009年11月21日 09:30)
是SVG還不是正式標準嗎? 怎麼用客家瀏覽器開起來的結果都不一樣?

用Chrome 4.0.222.3開是字型讀不出來, 背景的字有漏字(被圖蓋住)
http://img693.imageshack.us/img693/7495/svgchrome4.png

用Opera 10.0開是字型糢糊不清
http://img693.imageshack.us/img693/1213/svgopera.png

用Fx 3.5開是讀得到字型, 但背景的字包括下面的英文名字都完全顯示不出來
http://img81.imageshack.us/img81/5849/svgfx35.png


然後那個環狀字用chrome和fx都無法讀取
董福興
3.  董福興 (發表於 2009年11月21日 17:12)
@路行鳥
下一期我們就會請子斌兄介紹SVG,也把你的留言轉給他,請他作深入回應。敬請期待。
E02689dc7083a92c185f64d673878b37?size=48&default=wavatar
4.  子斌 (發表於 2009年11月22日 00:26)
|| 用Chrome 4.0.222.3開是字型讀不出來, 背景的字有漏字(被圖蓋住)
|| http://img693.imageshack.us/img693/7495/svgchrome4.png

Chrome現階段還不支持web fonts,不過快了

Reference: http://paulirish.com/2009/chrome-and-font-face-a-summary/

|| 用Opera 10.0開是字型糢糊不清
|| http://img693.imageshack.us/img693/1213/svgopera.png

其實我是故意把字體弄模糊的。感覺比較酷 ;-)

|| 用Fx 3.5開是讀得到字型, 但背景的字包括下面的英文名字都完全顯示不出來
|| http://img81.imageshack.us/img81/5849/svgfx35.png

FF 3.5現階段還不支持SVG animate屬性,所以因為背景的字和英文字都用了animate,所以這很有可能導致到FF3.5顯示不出。
118ed642d310bc813c5ce34d61285f49?size=48&default=wavatar
5.  wellss (發表於 2010年3月22日 12:51)
FF 3.6 一樣還是不支援 SVG animate,顯示結果跟上面留言的圖片一樣,還有王宗漢字型那連結已失。
811d29c8dab61ead86c1fcdc04bdeafb?size=48&default=wavatar
6.  weichen (發表於 2010年5月17日 17:43)
感謝分享,不過應該要加註一下,這個方法是在safari才可以看到。


其他瀏覽器要用其他寫法。


謝了
451a61e1fc186a9da6cc92b2926c78ea?size=48&default=wavatar
7.  amber (發表於 2011年8月04日 09:44)
現在已經有中文網路字型機制推出囉(⊙ˍ⊙)
可參考CT-BOX魔力文字 http://www.ct-box.net
針對部落格有優化設計,可直接使用
參考一下
發表回應
謹慎發言,尊重彼此。按此展開留言規則