使用 Cofun 快速解決網站字體支援度問題

byadmin 發表於 2013-4-27 18:57:50 , 4654人已閱讀 , 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