資訊專欄INFORMATION COLUMN
摘要：自己制作字體圖標的時候有需要注意這些阿里圖標庫的圖標多，免費但是編輯器不如好用。建議設計師對于一些常用圖標直接去阿里圖標庫找，下載文件即可。
優點
下面的簡介來自，著名字體圖標庫Font Awesome的首頁，http://fontawesome.io：
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Font Awesome 或者其他字體圖標能提供可以直接使用CSS修改的可縮放的矢量圖標，可以修改的內容包括圖標的大小、顏色、陰影等這些CSS的力量能做到的一切。
簡單來說優點有：
矢量（無限縮放、高清）
CSS樣式（通用、靈活）
體積更小（快速）
......
缺點這些可能是項目沒用上字體的圖標的一些原因，并不完全是字體圖標的缺點：
庫（Font Awesome......）太大了
不能完全符合設計稿
兼容性、可訪問性
太麻煩，還是之前切圖片圖標方便
歷史項目，改動成本太高
解決方案or分析 庫（Font Awesome......）太大了 & 不能完全符合設計稿使用字體圖標編輯器修改字體圖標庫，參考圖標字體(IconFont)制作這篇文章中提到的軟件FontCreator去編輯字體圖標庫的某個字體文件，重新轉化生成。刪除大量用不到的字體圖標后，圖標庫的體積會大大縮小。
方案一略麻煩，不推薦。我們其實可以自己做字體圖標庫，參考ICONFONT平臺功能介紹、可能更好用的IcoMoon App。自己制作字體圖標的時候有需要注意這些：
阿里圖標庫ICONFONT的圖標多，免費但是編輯器不如IcoMoon好用。不過可以從阿里圖標庫下載SVG圖標再導入IcoMoon中制作。
建議設計師對于一些常用圖標直接去阿里圖標庫找，下載SVG文件即可。對于實在找不到的圖標才自己動手做，使用Ps、Ai、Sketch等做出符合字體圖標標準的SVG即可。最好除了圖標本身外不要有多余的細節如邊距、背景等，這些都會用CSS寫。前端拿到一套SVG后自己去制作成字體圖標即可。
SVG圖標上傳到圖標制作平臺后，還需要做簡單調整包括默認大小、位置、對齊等。整個公司可以按照一個統一標準調整這些SVG。如果是IcoMoon的話，調整完畢后記得把SVG再下載下來，好好保存（給設計部發一份），之后會很通用。而且IcoMoon非白金會員的話是無法在線存儲的。
簡單圖標在設計階段就無需自己設計，復雜圖標也可以導出SVG制作成通用的字體圖標，不但能還原設計稿，還可能效率更高。
比如，某設計的不會畫圖標，于是TA在阿里圖標庫把PNG的圖標下載下來，然后在Ps里做視覺稿，然后前端切圖小弟又從PSD中把圖標切出來，xx.png，xx@2x.png，有時候這些圖標竟然還自帶背景色......
比如，某設計會畫圖標，于是把通用圖標畫了個遍，然后切圖......
只能說：
兼容性、可訪問性這是個不怎么追求效率的時代
兼容性
字體圖標是基于WebFont來實現的，WebFont的兼容性請看，caniuse WebFont。
再提供多種格式的字體的前提下，兼容性完全不是問題。
可訪問性
國內很少關注這個吧，其實Font Awesome提供了相關的說明，請看，Accessibility
太麻煩，還是之前切圖片圖標方便其實直接切出圖標，如Sketch可以直接導出多種大小的圖標。配合各類打包工具如Webpack，可以把小圖標轉化成base64代碼。從某種意義上來說確實挺方便，而且也支持Retina，也挺小。
其實這方案也行，不過，最重要的是可以把切圖標的工作拋給設計師吧......
有時候根本不考慮Retina了，不考慮響應式，不考慮移動端了，不考慮......，總之先把項目趕出來。
歷史項目，改動成本太高有些項目確實是前輩沒有考慮到用字體圖標，或者那時候還沒有這種技術。
但是有些最近的項目，那非常可能是前輩挖的坑，區別是有意無意吧。不過大多數都不是故意的。趕而已，懶而已。
更多 & 參考圖標字體化淺談
其他可以告訴我你不用字體圖標的理由嗎？有些兼容、缺陷可能未能列舉出來，見諒歡迎補充。
我不用字體圖標，我用kaomoji：(☆_☆)和emoji： ?
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111572.html
摘要：開發過程中，可能會遇到這種情況電腦屏幕是寸，寸的，但是在瀏覽器中顯示寬度沒有達到自己屏幕的寬度，導致樣式把控上很不方便。以確保大多數筆記本的顯示情況是符合我們期望的那樣。前端技術交流群歡迎加入 開發過程中，可能會遇到這種情況：電腦屏幕是13寸，14寸的，但是在瀏覽器中顯示寬度沒有達到自己屏幕的寬度，導致樣式把控上很不方便。 這種問題多發現于筆記本電腦上，并不是說臺式機上沒有這個問題，而...
摘要：開發過程中，可能會遇到這種情況電腦屏幕是寸，寸的，但是在瀏覽器中顯示寬度沒有達到自己屏幕的寬度，導致樣式把控上很不方便。以確保大多數筆記本的顯示情況是符合我們期望的那樣。前端技術交流群歡迎加入 開發過程中，可能會遇到這種情況：電腦屏幕是13寸，14寸的，但是在瀏覽器中顯示寬度沒有達到自己屏幕的寬度，導致樣式把控上很不方便。 這種問題多發現于筆記本電腦上，并不是說臺式機上沒有這個問題，而...
摘要：前端性能優化的涉及點從服務器到協議再到宿主環境本身都要有比較深刻的認識，業界目前主要還是以雅虎總結出來條前端性能優化的黃金軍規為參考。 歡迎大家前往騰訊云技術社區，獲取更多騰訊海量技術實踐干貨哦~ 導語 : 從事前端有6年+的時間了，從最開始的美工到重構再到偏向js邏輯開發的前端開發，一直在前端這個行業里面摸索和學習，我現在將自己這些年的一個心得體會來個系統性的梳理寫成一篇關于性能優化...
摘要：為什么要使用圖標字體使用這項技術總得有使用它的理由那么，我們來分析下的優缺點，看是不是適合正在開發的項目。優化項目性能字體的加載速度快于圖片，就算圖片經過合并。 為什么要使用圖標字體 使用這項技術總得有使用它的理由！那么，我們來分析下iconfront的優缺點，看是不是適合正在開發的項目。 優點 1、優化項目工作流程 對于web前端項目中的圖標，很多情況下是使用的png圖片，但如果圖標...
閱讀 877·2021-11-18 10:02
閱讀 1686·2019-08-30 15:56
閱讀 2573·2019-08-30 13:47
閱讀 2646·2019-08-29 12:43
閱讀 856·2019-08-29 11:19
閱讀 1786·2019-08-28 18:23
閱讀 2673·2019-08-26 12:23
閱讀 3012·2019-08-23 15:29
