怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

這篇文章主要介紹怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供藍(lán)山網(wǎng)站建設(shè)、藍(lán)山做網(wǎng)站、藍(lán)山網(wǎng)站設(shè)計(jì)、藍(lán)山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、藍(lán)山企業(yè)網(wǎng)站模板建站服務(wù),10余年藍(lán)山做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

前幾天寫(xiě)了篇文章,就是用css來(lái)實(shí)現(xiàn)三角箭頭,雖然達(dá)到需要的效果了,但還是有一些問(wèn)題,比如依舊需要靠position來(lái)定位箭頭的位置。而且目前也只能實(shí)現(xiàn)三角箭頭,若想用一些其他的字符,還是得用圖片。于是最近一直在尋找更好的辦法,最終被我找到了……

首先,我們?nèi)盤(pán)Fonts文件夾里找到WEBDINGS.TTF字體,復(fù)制到桌面。接下來(lái),我們需要一個(gè)軟件,就是“fontforge”,它可以實(shí)現(xiàn)制作自定義字體的功能,我們后面就要用它來(lái)做一個(gè)適用于我們自己的字體庫(kù)。

下載好后解壓,把WEBDINGS.TTF字體復(fù)制到里面,運(yùn)行fontforge.bat并選擇字體文件,然后出現(xiàn)這個(gè)界面:

怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

很多圖形字符吧,是不是發(fā)現(xiàn)很多字符以前都用到過(guò),只不是那時(shí)是用圖片來(lái)實(shí)現(xiàn)的?

接下來(lái)我們要做的就是選擇需要的字符,存到另一個(gè)字體文件里,因?yàn)閃EBDINGS.TTF這個(gè)文件里的大多數(shù)字符都是用不到的,所以直接用這個(gè)文件來(lái)當(dāng)我們的字符庫(kù)有點(diǎn)略大,所以我們只需選擇我們需要的就行,操作上我們先新建一個(gè)空白的字體文件,點(diǎn)File->New,然后選擇需要的字符,并復(fù)制到新建的字體文件中,如:

怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

然后保存,選擇Generate Fonts:

怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

然后設(shè)置保存為.ttf結(jié)尾的文件:

怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

這樣,我們的字體文件就做好了。但是,還沒(méi)有結(jié)束,因?yàn)镮E只認(rèn)識(shí).eof,不認(rèn)識(shí).ttf,所以我們還需要生成其他的字體文件,關(guān)于這個(gè)問(wèn)題,我很早寫(xiě)過(guò)篇文章,操作方法都有說(shuō)明,就不具體介紹了,文章鏈接:《網(wǎng)頁(yè)中使用任意字體之實(shí)際操作》。

最后,如果你覺(jué)得操作太麻煩,可以下載我整理的一個(gè)字符庫(kù),主要是以箭頭為主,因?yàn)樘S昧恕?br/>下載地址怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

總的來(lái)說(shuō),這個(gè)東西雖然會(huì)增加加載頁(yè)面文件的總大小,但是如果有自己的字符庫(kù),操作性會(huì)更加多元化。因?yàn)槲覀兛梢钥刂谱址拇笮?、顏色,甚至還有陰影、翻轉(zhuǎn)等css3效果,而圖片如果要換個(gè)顏色,就必須修改,或者重新制作一張,可塑性不強(qiáng)。

PS:我的EonerCMS里,窗口右上和右下的按鈕都已經(jīng)換成字符了,效果挺不錯(cuò)的

怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符

以上是“怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

本文標(biāo)題:怎么用@font-face實(shí)現(xiàn)網(wǎng)頁(yè)特殊字符
路徑分享:http://bm7419.com/article38/gihcpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)小程序開(kāi)發(fā)、網(wǎng)站內(nèi)鏈關(guān)鍵詞優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)