byadmin 發表於 2013-4-27 18:57:50
, 4659人已閱讀 , 0人回應
什麼是 Cufon 呢?
- 簡單的說,Cufon 是一個用來替代 sIFR 框架,實現在網頁中對文字字體進行渲染功能的 JavaScript 效果
為什麼需要使用Cufon ?
舉個網頁常會遇見的狀況 , 當你今天想要讓網站套用微軟正黑體的字型時, 總是會考量到使用者電腦系統是否有內建正黑體字型 ? 以XP系統來講他就是屬於需要使用者自行下載安裝字型的字體 , 而現階段最多人使用的作業系統 , 很遺憾還是 XP , 因此要讓所有用戶都能夠看到正黑體的字型話 , 除了告知會員字型下載安裝字體外 , 使用 Cufon 就是一個可以解決這問題的方法 !
Cufon 使用限制
其實目前已經很常看見Cufon應用在國外各大網站中 , 之所以英文比中文普及使用 , 最重要的關鍵就是在於 , 英文所有單字都是由26個字母所拼湊而成 , 因此英文字型檔案大小幾乎都非常小 , 不會影響整個網站載入速度。但是中文恰恰相反 , 中文字的數量龐大,多達10萬以上 , 就算是常用的文字也大約有數千個 , 因此即便是Cufon可支援中文字庫 , 但常常因為字型庫文字數量龐大造成字型檔案過大 , 實際上使用根本不可能。因此Cufon要拿來使用中文的話 , 通常都是應用在局部文字的美化 (最常用在按鈕列) , 透過Cufon 線上轉換字庫功能 , 只轉換我們需要用到的中文字 , 即可大大縮小 Cufon 字型檔案。
Cufon 使用較學
步驟一
下載cufon的 js 核心庫 http://cufon.shoqolate.com/js/cufon-yui.js
步驟二
製作你要的字型庫
Cufon官方:http://cufon.shoqolate.com/generate/
英文:http://www.cufon-font.com/font-letter.htm (Cufon中文 - 英文字庫)
中文:http://www.cufon-font.com/font-cufon.htm (Cufon中文 - 中文字庫)
中文字型的話需要定義需要使用的中文字 , 選擇Rendering it 進入輸入並重新產生字型js檔案
當有了這兩個檔案後 , 接下來就是套用到網站上吧 ~
Cofun 的安裝與使用
1. 在網站<head></head>標籤中快速引入 js庫 以及 字型庫
- <script src="路徑/cufon-yui.js" type="text/javascript"></script>
- <script src="路徑/Antipasto_400.font.js" type="text/javascript"></script> (自己下載的字型庫)
- <script src="路徑/Kushite_300.font.js" type="text/javascript"></script> (自己下載的字型)
複製代碼 2. 指定要產生效果的區域
- <script type="text/javascript">
- Cufon.replace('輸入id,class,標籤', {
- fontFamily: '我所下載的字型名稱',
-
- } )
- </script>
複製代碼 fontFamily輸入的名稱可以打開下載的字型.js 第一行就可以找到 ~ 見下面紅色字體:
>>> Cufon.registerFont({"w":121,"face":{"font-family":"Antipasto",
常見的Cufon設定值
Cufon 配置項 | 對應 CSS 風格 | 備註 | color | color |
| fontSize | font-size | 在 Cufon 配置項下使用時,僅允許使用 px 作為風格的單位 | fontStyle | font-style |
| fontWeight | font-weight |
| fontStretch | font-stretch | CSS3 風格,僅允許通過 cufon 配置項進行使用,如果在 CSS 文件中指定,則會被部分瀏覽器視為無效而忽略 | letterSpacing | letter-spacing |
| textTransform | text-transform
|
Cufon 範例檔案下載:
cufonTest.rar
(27.17 KB, 下載次數: 6)
|
|