資訊專欄INFORMATION COLUMN
摘要：這章要說的是如何把自己設(shè)計的轉(zhuǎn)成，在網(wǎng)頁上使用字體圖標除了圖像清晰度之外，主要還是清晰度，特別是用于手機上多屏的情況無論屏幕何種分辨率都不會模糊，不用額外做響應(yīng)處理。
對字體大家一定不陌生
一般使用Font-family: Georgia, SimSun, “宋體”設(shè)置字體。字體主要使用兩種:襯線和非襯線，但這不是我們這章的主要內(nèi)容。
這章要說的是如何把自己設(shè)計的icon轉(zhuǎn)成font，在網(wǎng)頁上使用！
字體圖標除了圖像清晰度之外，主要還是清晰度，特別是用于手機上多屏的情況無論屏幕何種分辨率都不會模糊，不用額外做響應(yīng)處理。其次是靈活度，使用字體圖標可以隨意設(shè)置大小和顏色，不用因為一點不一樣又重新切圖。
兼容性，ttf,svg支持低版本，woff支持谷歌火狐等，如果只是手機上使用可以使用woff格式就可以了。特別注意，如果引入字體不在同一個域名下是會出現(xiàn)跨域的，無法下載字體。設(shè)置CORS做處理能兼容到ie7。
1,在這里要使用到一個編輯字體的軟件FontForgeBuilds，下載地址：網(wǎng)下找一個好了
2,安裝完打開之后選擇一個字體，或者新建一個字體：
可以看到這是已經(jīng)有字的字體
3,選擇一個空的，右鍵New Outline Window打開這個字的路徑，把我們事先準備好的icon的帶路徑的svg（這個可以找UI小姐姐幫忙導(dǎo)一個，ai畫好icon后路徑輪廓化描邊導(dǎo)出svg就可以用） 從File處Import進來，調(diào)整一下位置，可以在字體那頁看到這個icon的顯示位置
4,回到字體頁，右鍵該字，選擇Glyph Info修改name和value值，value值用于在頁面上顯示
5,生成字體，從File處Generate Fonts，選擇要生成的字體格式，和存放的位置，確定后點擊Generate ，接下來會彈出錯信息但不要管它，直接Generate。
6,使用為剛剛編輯的那個字的標識
123456
我們剛剛導(dǎo)入的那個搜索icon就出來了：
感覺牛X轟轟，我都被自己征服
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112101.html
摘要：只是，僅支持這一種格式是專門為開發(fā)而設(shè)計的字體，其字體尺寸更小，加載更快，應(yīng)該優(yōu)先使用。字體圖標技術(shù)的實現(xiàn)就是把通常的字符集映射成了另外的圖標形狀例如把映射成了 本文的目標是：使用css可以控制圖標的顏色，大小需要工具：png轉(zhuǎn)svg工具(如果ui給的svg就更好了) iconfont(圖標轉(zhuǎn)代碼) 第一步，把圖標轉(zhuǎn)成svg格式的 打開網(wǎng)址 https://www.bejso...
摘要：所以實現(xiàn)小圖標時雪碧圖跟圖標字體會在一個網(wǎng)站共存，自定義圖標字體為什么比較耗時，且太復(fù)雜圖標無法實現(xiàn)請往下看開發(fā)流程就了解了。參考資料細談淺談圖標字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標技巧雪碧圖圖標字體矢量小圖標設(shè)計本文對應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...
摘要：本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進階手法，對小程序中的動畫音頻等踩坑做出解決方案。 背景 一個交互不復(fù)雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學習成本，值得一試。本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進階手法，對...
摘要：結(jié)論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結(jié)論選擇或許是一個不錯地選擇去替代的使用方式。 這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導(dǎo)一下問題。 SVG vs I...
閱讀 923·2023-04-25 23:59
閱讀 3866·2021-10-08 10:04
閱讀 1749·2019-08-30 14:05
閱讀 1073·2019-08-30 13:58
閱讀 552·2019-08-29 18:41
閱讀 1179·2019-08-29 17:15
閱讀 2379·2019-08-29 14:13
閱讀 2801·2019-08-29 13:27
