搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 使用 Cofun 快速解決網站字體支援度問題
byadmin 發表於 2013-4-27 18:57:50 , 4545人已閱讀 , 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檔案
2013-04-27_183939.jpg



當有了這兩個檔案後 , 接下來就是套用到網站上吧 ~

Cofun 的安裝與使用

1. 在網站<head></head>標籤中快速引入 js庫 以及 字型庫

  1. <script src="路徑/cufon-yui.js" type="text/javascript"></script>
  2. <script src="路徑/Antipasto_400.font.js" type="text/javascript"></script> (自己下載的字型庫)
  3. <script src="路徑/Kushite_300.font.js" type="text/javascript"></script> (自己下載的字型)
複製代碼
2. 指定要產生效果的區域

  1. <script type="text/javascript">

  2.   Cufon.replace('輸入id,class,標籤', {  
  3.     fontFamily: '我所下載的字型名稱',
  4.    
  5. } )
  6.   </script>
複製代碼
fontFamily輸入的名稱可以打開下載的字型.js 第一行就可以找到 ~ 見下面紅色字體:
  >>> Cufon.registerFont({"w":121,"face":{"font-family":"Antipasto",

常見的Cufon設定值

Cufon 配置項對應 CSS 風格備註
colorcolor
fontSizefont-size在 Cufon 配置項下使用時,僅允許使用 px 作為風格的單位
fontStylefont-style
fontWeightfont-weight
fontStretchfont-stretchCSS3 風格,僅允許通過 cufon 配置項進行使用,如果在 CSS 文件中指定,則會被部分瀏覽器視為無效而忽略
letterSpacingletter-spacing
textTransformtext-transform



Cufon 範例檔案下載: cufonTest.rar (27.17 KB, 下載次數: 6)


Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.230757 second(s), 47 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-3-29 10:13

回頂部