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

時間 2019-11-11

標籤 cufon 網頁畫出特殊字體欄目 HTML 简体版

原文原文鏈接

設計師們有時會使用特殊字體讓網頁更好看，但瀏覽器一般只支持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渲染網頁字體。字體

相關標籤/搜索