當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS制作字体图

發(fā)布時(shí)間：2023/12/31 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS制作字体图小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

我們經(jīng)常會(huì)在網(wǎng)頁(yè)中看到很多小圖標(biāo)，其實(shí)這些圖標(biāo)大多數(shù)都不是圖片，而是字體圖。
制作字體圖總共有三種辦法：

第一種： CSS Sprite（美其名曰雪碧圖, 精靈圖）

第二種： font + HTML 進(jìn)行制作

第三種： CSS+ font 進(jìn)行制作

第一種：

主要使用兩個(gè)屬性，一個(gè)是background-image,和另一個(gè)屬性backgroun-position.通過(guò)改變圖片的位置，實(shí)現(xiàn)在對(duì)應(yīng)的位置顯示對(duì)應(yīng)的圖片。

優(yōu)點(diǎn)：

1-節(jié)省了文件的體積和HTTP請(qǐng)求的次數(shù)（一般保存為png-24）
2-可以設(shè)置各種顏色的小圖標(biāo)

難點(diǎn)：

1-需要預(yù)先知道小圖標(biāo)的大小
2-需要知道小圖標(biāo)之間的距離
3-需求變更，維護(hù)很麻煩。

第二種：

需要引入字體通過(guò)@font-face;

第一步：登陸這個(gè)網(wǎng)站https://icomoon.io/app/#/select/font 這個(gè)網(wǎng)站
Import to Set導(dǎo)入（設(shè)計(jì)師的）SVG圖片。

第二步：登陸這個(gè)網(wǎng)站https://icomoon.io/app/#/select/font （目前國(guó)內(nèi)使用最多的字體網(wǎng)站），點(diǎn)擊download下載字體圖文件包。

下載下來(lái)效果

選擇里面.woff文件

將@font-face中的src路徑替換，或者在工程中，SRC路徑引入.woff文件。【下面代碼中概述】

第三步
接下來(lái)我們先寫寫代碼：
首先是CSS代碼啦~~
這里我們要知道一個(gè)引入字體模式長(zhǎng)什么樣子：

@font-face{Font-family:<family-name>;src:[<url>[format<string>#]?|<font-face-name>]#;Font-weight:<weight>;Font-style:<style>}

舉例：

@font-face{font-family:”font-name”;src:url(“../fonts/font-name.eot”);src:url(“../fonts/font-name.eot”)formate(“embedded-opentype”),url(“../fonts/font-name.woff”).formate(“woff”),url(“../fonts/font-name.svg”).formate(“svg”);font-weight:normal;font-style:normal;}

上面的font-name是字體的名字，這里可以自己隨便取（開玩笑的，名字盡量有意義就可以）。src是需要引入的字體的路徑，就在上面進(jìn)行了說(shuō)明。Font-weight以及Font-style如果沒(méi)有什么特殊的要求，一般都設(shè)置成normal。

這里要注意一點(diǎn)：瀏覽器兼容，如果需要 IE6兼容的話eot后面要加?#iefix如下面所示（腦補(bǔ)箭頭指向了下方）

@font-face{font-family:”font-name”;src:url(“../fonts/font-name.eot”);src:url(“../fonts/font-name.eot?#iefix”)formate(“embedded-opentype”),url(“../fonts/font-name.ttf”).formate(“truetype”),url(“../fonts/font-name.svg”).formate(“svg”);font-weight:normal;font-style:normal;}

第四步
這里還是CSS代碼啦~~
我們需要在類里面，引入我們?cè)诰W(wǎng)站上下載下來(lái)的字體。

.font-name{Font-family:font-name;Font-weight:normal;Font-style:normal;Font-size:16px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale;}

對(duì)于Font-family這個(gè)字體，當(dāng)然是需要引入，我們起名字那個(gè)font-name啦，要不字體不是白白下載了，然后在font-name類中（這個(gè)是HTML里面的Class喔，別搞混了），設(shè)置你需要的屬性，大綱已經(jīng)寫在上面了，請(qǐng)自行修改。

第五步

找我們的頁(yè)面，使用字體圖~~~~
這里記住：字體前面一定要加上￥#X 才可以顯示

對(duì)于xf048，xf049這些東東，你只需填到對(duì)應(yīng)的元素里面即可，他們的值是怎么來(lái)的？？？這個(gè)呀，要不你再看看原來(lái)那個(gè)網(wǎng)站，是自己生成的啊，而且你還可以修改吆。

第三種：

CSS+font（CSS引入font字體，主要是利用:before屬性在元素前面加內(nèi)容，用\進(jìn)行轉(zhuǎn)譯，然后再HTML中添加字體設(shè)置的類）
這里就不在講述了，有興趣同學(xué)可以自己搜索相關(guān)資料。

本文是作者自己在項(xiàng)目開發(fā)中心得體會(huì)，無(wú)任何廣告宣傳，轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的JS制作字体图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

js
字体

上一篇： JS制作字体图（文字图）
下一篇：鲨鱼记账app如何把支付宝的数据导入(鲨