這篇文章主要介紹怎么用@font-face實現(xiàn)網(wǎng)頁特殊字符,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)公司是專業(yè)的古城網(wǎng)站建設(shè)公司,古城接單;提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行古城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!前幾天寫了篇文章,就是用css來實現(xiàn)三角箭頭,雖然達(dá)到需要的效果了,但還是有一些問題,比如依舊需要靠position來定位箭頭的位置。而且目前也只能實現(xiàn)三角箭頭,若想用一些其他的字符,還是得用圖片。于是最近一直在尋找更好的辦法,最終被我找到了……
首先,我們?nèi)盤Fonts文件夾里找到WEBDINGS.TTF字體,復(fù)制到桌面。接下來,我們需要一個軟件,就是“fontforge”,它可以實現(xiàn)制作自定義字體的功能,我們后面就要用它來做一個適用于我們自己的字體庫。
下載好后解壓,把WEBDINGS.TTF字體復(fù)制到里面,運行fontforge.bat并選擇字體文件,然后出現(xiàn)這個界面:
很多圖形字符吧,是不是發(fā)現(xiàn)很多字符以前都用到過,只不是那時是用圖片來實現(xiàn)的?
接下來我們要做的就是選擇需要的字符,存到另一個字體文件里,因為WEBDINGS.TTF這個文件里的大多數(shù)字符都是用不到的,所以直接用這個文件來當(dāng)我們的字符庫有點略大,所以我們只需選擇我們需要的就行,操作上我們先新建一個空白的字體文件,點File->New,然后選擇需要的字符,并復(fù)制到新建的字體文件中,如:
然后保存,選擇Generate Fonts:
然后設(shè)置保存為.ttf結(jié)尾的文件:
這樣,我們的字體文件就做好了。但是,還沒有結(jié)束,因為IE只認(rèn)識.eof,不認(rèn)識.ttf,所以我們還需要生成其他的字體文件,關(guān)于這個問題,我很早寫過篇文章,操作方法都有說明,就不具體介紹了,文章鏈接:《網(wǎng)頁中使用任意字體之實際操作》。
最后,如果你覺得操作太麻煩,可以下載我整理的一個字符庫,主要是以箭頭為主,因為太常用了。
下載地址
總的來說,這個東西雖然會增加加載頁面文件的總大小,但是如果有自己的字符庫,操作性會更加多元化。因為我們可以控制字符的大小、顏色,甚至還有陰影、翻轉(zhuǎn)等css3效果,而圖片如果要換個顏色,就必須修改,或者重新制作一張,可塑性不強。
PS:我的EonerCMS里,窗口右上和右下的按鈕都已經(jīng)換成字符了,效果挺不錯的
以上是“怎么用@font-face實現(xiàn)網(wǎng)頁特殊字符”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:怎么用@font-face實現(xiàn)網(wǎng)頁特殊字符-創(chuàng)新互聯(lián)
URL鏈接:http://aaarwkj.com/article30/cdpiso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、Google、用戶體驗、網(wǎng)站內(nèi)鏈、電子商務(wù)、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容