cufon,在網頁上畫出特殊字體

設計師們有時會使用特殊字體讓網頁更好看,但瀏覽器一般只支持Arial、Helvetica等通用字體。那麼一般的解決辦法就是將特殊字體作成圖片。若是要動態生成文字內容怎麼辦?那也許只有使用CSS3的@font-face功能了……等下!其實還有cufon這個工具,能夠幫咱們在網頁上」畫」出特殊字體。 html

cufon的原理是將TTF字體轉換成JavaScript代碼,而後在須要特殊字體的地方建立一個<canvas>元素,將字體畫出來。效果以下: web

cufon的效果

使用方法也很簡單,只需訪問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渲染網頁字體字體

相關文章
相關標籤/搜索