|
在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)師會在設(shè)計(jì)中加入一些特殊效果的字體以使得頁面更加美觀，然而訪問者的系統(tǒng)一般都是沒有安裝這些特殊字體的，所以使用font-family屬性來定義這些特殊字體是行不通的，于是人們想出了很多解決方案，今天要介紹的是其中之一的Cufon方案。
定義及基本原理
什么是Cufon呢？簡單的說，Cufon是一個用來替代sIFR（更早期的一種自定義字體實(shí)現(xiàn)方案）框架，實(shí)現(xiàn)在網(wǎng)頁中對文字字體進(jìn)行渲染功能的純JavaScript開源類庫。其基本原理是借助于瀏覽器所推出的專有頁面繪畫方案，如 VML、Canvas 和 SVG 等，在網(wǎng)頁相關(guān)位置上“畫”出了所需要顯示的文字字符，并同時替換原先區(qū)域所需要顯示的文字。如果讀者所使用的瀏覽器恰好是Firefox的話，右鍵單擊經(jīng)Cufon 渲染的文字，就可以發(fā)現(xiàn)這些文字可以按照圖片模式進(jìn)行查看和存儲。
簡單范例
步驟一：引入Cufon核心庫
作為一種基于 JavaScript 的網(wǎng)頁字體引入方案， Cufon 的核心功能是通過一個名為“cufon-yui.js”的 JavaScript 類庫，提供給開發(fā)人員的。因此使用 Cufon 技術(shù)的第一步，當(dāng)然就是在 Web 頁面中引入這一類庫。首先到Cufon網(wǎng)站下載類庫文件（最新版本是1.09i），如下圖所示：
代碼中引入Cufon庫，如下所示：
<script type="text/javascript" src="js/cufon-yui.js"></script>
步驟二：創(chuàng)建和引入字體文件
這里說的字體文件是Cufon字體文件，這是使用 Cufon 技術(shù)的另一個關(guān)鍵所在。什么是 Cufon 字體文件呢？簡言之 Cufon 字體文件，就是按照 Cufon 所提出的字體描述標(biāo)準(zhǔn)，創(chuàng)建形成的一種字體文件。而和其他字體創(chuàng)建標(biāo)準(zhǔn)如 TrueType、OpenType 等不同的是，按照 Cufon 標(biāo)準(zhǔn)所形成的這一文件本身，就是一個標(biāo)準(zhǔn)的 JavaScript 腳本文件，并交由 Cufon 類庫進(jìn)行解析和處理。
Cufon為開發(fā)人員準(zhǔn)備了相應(yīng)的在線工具，來實(shí)現(xiàn)這一轉(zhuǎn)換過程。而目前工具所可以轉(zhuǎn)換的字體標(biāo)準(zhǔn)則包括了 TrueType、FreeType2、OpenType、PostScript Font 等多種，應(yīng)該說這幾乎囊括了當(dāng)前主流的一些字體創(chuàng)建標(biāo)準(zhǔn)。工具的使用其實(shí)并不復(fù)雜，筆者就不贅述了。
以Denne Shuffle字體為例（更多創(chuàng)意字體可見20款非常有趣的高質(zhì)量免費(fèi)字體），在使用這一工具產(chǎn)生了相應(yīng)的 Cufon 標(biāo)準(zhǔn)的字體文件“Denne_Shuffle_400.font.js”后，就可以通過如下代碼所示的形式將其引入到頁面中：
<script type="text/javascript" src="js/Denne_Shuffle_400.font.js"></script>
出處：博客園
責(zé)任編輯：bluehearts
上一頁 下一頁 使用Cufon技術(shù)實(shí)現(xiàn)Web自定義字體 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 使用Cufon技術(shù)實(shí)現(xiàn)Web自定義字體 [1]
第 2 頁 
