作品集小技巧:Cufon讓網頁的字型更漂亮

瀏覽數:

這幾天把wordpress的theme更新的時候, 在smooth這個theme裡看到他使用cufon的技巧, 讓整個版面更為精緻漂亮, 覺得很值得分享給大家, 可惜的是, cufon這個java的外掛還沒辦法支援字型眾多的中文, 所以要使用cufon時, 還是只能用在英文的標頭而已

cufon是什麼? 它是透過java的技術, 把你要的字型轉為圖片, 然後結合CSS替換在你的網頁設計上; 所以像你從dafont下載的特殊字型, 過去是無法使用在網頁上(因為瀏覽者的OS不見得有安裝你下載的特殊字型), 但是透過cufon, 不管瀏覽者有無安裝, 他都能看到原汁原味的字型, 很適合用來做網頁的大標或小標 English only

1. 首先, 你可以去dafont上面找一個你喜歡的字型, 我在這邊選得是Antipasto這個可愛的圓角字

2. 解壓縮之後, 到cufon的站上去,
2-1. 先下載cufon的核心檔, 在download上面點右鍵, 選另存新檔

2-2. 然後使用Cufon Generator, 將你剛剛在dafont下載的字型轉成javascript能用的圖形檔

在regular typeface上選你剛剛解出來的Antipasto字型檔

中間有很多設定有點複雜, 基本上不用理他, 照以下的欄位來做

接著捲到最後勾這個選項, 再按Let’s Do This!

系統會跑出來一個js檔叫你下載

就是cufon把你要的字型轉成圖片了

3. 有了這兩個js檔, 你就可以在網頁的插入cufon JS的語法了, 語法長這樣

3-1. 如果你想同時用兩種不同的字型, 語法改成這樣

3-2. 如果你想在字型上做顏色的變化, 語法可改成這樣

您瞧瞧, 是不是美觀多了呢!

下載範例包看看! http://prattflora.com/cufonTest.rar

PS. 如果你使用wordpress, cufon是有外掛的, 到google搜尋wp cufon就可以了, 但是據說有些bug呢! 安裝前可得爬文一下較好!

分享到你的社群
  •  
  •  
  •  
  •  
  •  

4 Comments

  1. Pingback: CUFON中文应用 | XIEXIE'S BLOG

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *