瀏覽數:
這幾天把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呢! 安裝前可得爬文一下較好!
真是好站,加入最愛! 😛
不錯~加收藏
網頁設計時又多一個選擇
Pingback: CUFON中文应用 | XIEXIE'S BLOG
很棒耶 但我想請教一下
如果是放在一般的網站呢
謝謝