當(dāng)前位置：
首頁 >
cufon，在网页上画出特殊字体
發(fā)布時間：2023/12/31
51
豆豆
生活随笔
收集整理的這篇文章主要介紹了
cufon，在网页上画出特殊字体
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
設(shè)計師們有時會使用特殊字體讓網(wǎng)頁更好看，但瀏覽器通常只支持Arial、Helvetica等通用字體。那么通常的解決辦法就是將特殊字體做成圖片。如果要動態(tài)生成文字內(nèi)容怎么辦？那也許只有使用CSS3的@font-face功能了……等下！其實還有cufon這個工具，可以幫我們在網(wǎng)頁上”畫”出特殊字體。
cufon的原理是將TTF字體轉(zhuǎn)換成JavaScript代碼，然后在需要特殊字體的地方創(chuàng)建一個<canvas>元素，將字體畫出來。效果如下：
使用方法也很簡單，只需訪問cufon，點擊Download下載cufon-yui.js(目前版本為1.09i)。再點擊Generator，上傳你的字體文件，即可得到轉(zhuǎn)換后的js文件（假設(shè)文件名為yourfont.font.js）。
然后在代碼里引入這兩個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的內(nèi)容就被替換成了所需的字體。
更詳細(xì)的討論可以參考使用Cufon渲染網(wǎng)頁字體。
轉(zhuǎn)載于:https://my.oschina.net/cimu/blog/164756
總結(jié)
以上是生活随笔為你收集整理的cufon，在网页上画出特殊字体的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 全新哈弗 H5 首批量产车下线，采用 2
- 下一篇： Node js报错 npm ERR! c