把圖標轉成web字體

wua_wua2012 發布于2019-08-29 12:43 / 2227人閱讀

摘要：這章要說的是如何把自己設計的轉成，在網頁上使用字體圖標除了圖像清晰度之外，主要還是清晰度，特別是用于手機上多屏的情況無論屏幕何種分辨率都不會模糊，不用額外做響應處理。

對字體大家一定不陌生
一般使用Font-family: Georgia, SimSun, “宋體”設置字體。字體主要使用兩種:襯線和非襯線，但這不是我們這章的主要內容。
這章要說的是如何把自己設計的icon轉成font，在網頁上使用！

字體圖標除了圖像清晰度之外，主要還是清晰度，特別是用于手機上多屏的情況無論屏幕何種分辨率都不會模糊，不用額外做響應處理。其次是靈活度，使用字體圖標可以隨意設置大小和顏色，不用因為一點不一樣又重新切圖。

兼容性，ttf,svg支持低版本，woff支持谷歌火狐等，如果只是手機上使用可以使用woff格式就可以了。特別注意，如果引入字體不在同一個域名下是會出現跨域的，無法下載字體。設置CORS做處理能兼容到ie7。

1,在這里要使用到一個編輯字體的軟件FontForgeBuilds，下載地址：網下找一個好了

2,安裝完打開之后選擇一個字體，或者新建一個字體：

可以看到這是已經有字的字體

3,選擇一個空的，右鍵New Outline Window打開這個字的路徑，把我們事先準備好的icon的帶路徑的svg（這個可以找UI小姐姐幫忙導一個，ai畫好icon后路徑輪廓化描邊導出svg就可以用）從File處Import進來，調整一下位置，可以在字體那頁看到這個icon的顯示位置

4,回到字體頁，右鍵該字，選擇Glyph Info修改name和value值，value值用于在頁面上顯示

5,生成字體，從File處Generate Fonts，選擇要生成的字體格式，和存放的位置，確定后點擊Generate ，接下來會彈出錯信息但不要管它，直接Generate。

6,使用為剛剛編輯的那個字的標識

123456

我們剛剛導入的那個搜索icon就出來了：

感覺牛X轟轟，我都被自己征服

云服務器 GPU云服務器把html轉成jpg 把文件轉成html 把源代碼轉成asp js把亂碼轉成中文

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112101.html

css可變色圖標及原理分析

摘要：只是，僅支持這一種格式是專門為開發而設計的字體，其字體尺寸更小，加載更快，應該優先使用。字體圖標技術的實現就是把通常的字符集映射成了另外的圖標形狀例如把映射成了本文的目標是：使用css可以控制圖標的顏色，大小需要工具：png轉svg工具(如果ui給的svg就更好了) iconfont(圖標轉代碼) 第一步，把圖標轉成svg格式的打開網址 https://www.bejso...

RebeccaZhong 2019-08-30 15:55 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
字體圖標的使用

摘要：字體圖標的不足既然字體圖標那么有效率，那么為什么不都使用字體圖標呢現在的限制主要是字體圖標的開發要求比較高，畢竟是開發一種字體。自己開發字體圖標很累，幸好有很多樂于分享的，現在有很多網站把一些常用的圖標都做成了字體圖標分享了出來。目錄字體圖標的介紹 iconfont的使用基于unicode的用法： ...

shuibo 2019-04-23 11:54 評論0 收藏0
FE.WX-小程序“無聊廣場”游戲前端性能優化與踩坑攻略

摘要：本文主要針對小程序無聊廣場的前端開發內容做總結，記錄常見的一些老生常談的進階手法，對小程序中的動畫音頻等踩坑做出解決方案。背景一個交互不復雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導的解決方案，使用dom操作一樣可以完成。節省了cocos creater的學習成本，值得一試。本文主要針對小程序無聊廣場的前端開發內容做總結，記錄常見的一些老生常談的進階手法，對...

qpal 2019-08-22 18:26 評論0 收藏0
SVG vs Image, SVG vs Iconfont

摘要：結論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結論選擇或許是一個不錯地選擇去替代的使用方式。這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導一下問題。 SVG vs I...

kel 2019-08-29 17:20 評論0 收藏0