設計師們有時會使用特殊字體讓網頁更好看,但瀏覽器一般只支持Arial、Helvetica等通用字體。那麼一般的解決辦法就是將特殊字體作成圖片。若是要動態生成文字內容怎麼辦?那也許只有使用CSS3的@font-face功能了……等下!其實還有cufon這個工具,能夠幫咱們在網頁上」畫」出特殊字體。 html
cufon的原理是將TTF字體轉換成JavaScript代碼,而後在須要特殊字體的地方建立一個<canvas>元素,將字體畫出來。效果以下: web
使用方法也很簡單,只需訪問cufon,點擊Download下載cufon-yui.js(目前版本爲1.09i)。再點擊Generator,上傳你的字體文件,便可獲得轉換後的js文件(假設文件名爲yourfont.font.js)。 canvas
而後在代碼裏引入這兩個js文件,再寫一點簡單的代碼: 瀏覽器
<head> <script src="cufon-yui.js"></script> <script src="yourfont.font.js"></script> <script> Cufon.replace('h1', { color: '#333', textShadow: '2px 2px #ddd' }); </script> </head>
這樣h1的內容就被替換成了所需的字體。 工具
更詳細的討論能夠參考使用Cufon渲染網頁字體。 字體