當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS制作字体图（文字图）

發布時間：2023/12/31 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS制作字体图（文字图）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我們經常會在網頁中看到很多小圖標，其實這些圖標大多數都不是圖片，而是字體圖。
制作字體圖總共有三種辦法：

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

第二種： font + HTML 進行制作

第三種： CSS+ font 進行制作

這里為大家講解一下前兩種的制作方式：

第一種：

主要使用兩個屬性，一個是background-image,和另一個屬性backgroun-position.通過改變圖片的位置，實現在對應的位置顯示對應的圖片。

優點：

1-節省了文件的體積和HTTP請求的次數（一般保存為png-24）
2-可以設置各種顏色的小圖標

難點：

1-需要預先知道小圖標的大小
2-需要知道小圖標之間的距離
3-需求變更，維護很麻煩。

第二種：

需要引入字體通過@font-face;

第一步：登陸這個網站https://icomoon.io/app/#/select/font 這個網站
Import to Set導入（設計師的）SVG圖片。

第二步：登陸這個網站https://icomoon.io/app/#/select/font （目前國內使用最多的字體網站），點擊download下載字體圖文件包。

下載下來效果

選擇里面.woff文件

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

第三步
接下來我們先寫寫代碼：
首先是CSS代碼啦~~
這里我們要知道一個引入字體模式長什么樣子：

@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是需要引入的字體的路徑，就在上面進行了說明。Font-weight以及Font-style如果沒有什么特殊的要求，一般都設置成normal。

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

@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代碼啦~~
我們需要在類里面，引入我們在網站上下載下來的字體。

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

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

第五步

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

對于xf048，xf049這些東東，你只需填到對應的元素里面即可，他們的值是怎么來的？？？這個呀，要不你再看看原來那個網站，是自己生成的啊，而且你還可以修改吆。

第三種：

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

本文是作者自己在項目開發中心得體會，無任何廣告宣傳，轉載請注明出處。

總結

以上是生活随笔為你收集整理的JS制作字体图（文字图）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。