成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

字體圖標(biāo)(font-icon)，你還有什么理由不使用它？

felix0913 / 885人閱讀

摘要：自己制作字體圖標(biāo)的時(shí)候有需要注意這些阿里圖標(biāo)庫(kù)的圖標(biāo)多，免費(fèi)但是編輯器不如好用。建議設(shè)計(jì)師對(duì)于一些常用圖標(biāo)直接去阿里圖標(biāo)庫(kù)找，下載文件即可。

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

下面的簡(jiǎn)介來(lái)自，著名字體圖標(biāo)庫(kù)Font Awesome的首頁(yè)，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 或者其他字體圖標(biāo)能提供可以直接使用CSS修改的可縮放的矢量圖標(biāo)，可以修改的內(nèi)容包括圖標(biāo)的大小、顏色、陰影等這些CSS的力量能做到的一切。

簡(jiǎn)單來(lái)說(shuō)優(yōu)點(diǎn)有：

矢量（無(wú)限縮放、高清）

CSS樣式（通用、靈活）

體積更?。焖伲?/p>

......

缺點(diǎn)

這些可能是項(xiàng)目沒(méi)用上字體的圖標(biāo)的一些原因，并不完全是字體圖標(biāo)的缺點(diǎn)：

庫(kù)（Font Awesome......）太大了

不能完全符合設(shè)計(jì)稿

兼容性、可訪問(wèn)性

太麻煩，還是之前切圖片圖標(biāo)方便

歷史項(xiàng)目，改動(dòng)成本太高

解決方案or分析 庫(kù)（Font Awesome......）太大了 & 不能完全符合設(shè)計(jì)稿
方案一

使用字體圖標(biāo)編輯器修改字體圖標(biāo)庫(kù)，參考圖標(biāo)字體(IconFont)制作這篇文章中提到的軟件FontCreator去編輯字體圖標(biāo)庫(kù)的某個(gè)字體文件，重新轉(zhuǎn)化生成。刪除大量用不到的字體圖標(biāo)后，圖標(biāo)庫(kù)的體積會(huì)大大縮小。

方案二

方案一略麻煩，不推薦。我們其實(shí)可以自己做字體圖標(biāo)庫(kù)，參考ICONFONT平臺(tái)功能介紹、可能更好用的IcoMoon App。自己制作字體圖標(biāo)的時(shí)候有需要注意這些：

阿里圖標(biāo)庫(kù)ICONFONT的圖標(biāo)多，免費(fèi)但是編輯器不如IcoMoon好用。不過(guò)可以從阿里圖標(biāo)庫(kù)下載SVG圖標(biāo)再導(dǎo)入IcoMoon中制作。

建議設(shè)計(jì)師對(duì)于一些常用圖標(biāo)直接去阿里圖標(biāo)庫(kù)找，下載SVG文件即可。對(duì)于實(shí)在找不到的圖標(biāo)才自己動(dòng)手做，使用Ps、Ai、Sketch等做出符合字體圖標(biāo)標(biāo)準(zhǔn)的SVG即可。最好除了圖標(biāo)本身外不要有多余的細(xì)節(jié)如邊距、背景等，這些都會(huì)用CSS寫(xiě)。前端拿到一套SVG后自己去制作成字體圖標(biāo)即可。

SVG圖標(biāo)上傳到圖標(biāo)制作平臺(tái)后，還需要做簡(jiǎn)單調(diào)整包括默認(rèn)大小、位置、對(duì)齊等。整個(gè)公司可以按照一個(gè)統(tǒng)一標(biāo)準(zhǔn)調(diào)整這些SVG。如果是IcoMoon的話，調(diào)整完畢后記得把SVG再下載下來(lái)，好好保存（給設(shè)計(jì)部發(fā)一份），之后會(huì)很通用。而且IcoMoon非白金會(huì)員的話是無(wú)法在線存儲(chǔ)的。

簡(jiǎn)單圖標(biāo)在設(shè)計(jì)階段就無(wú)需自己設(shè)計(jì)，復(fù)雜圖標(biāo)也可以導(dǎo)出SVG制作成通用的字體圖標(biāo)，不但能還原設(shè)計(jì)稿，還可能效率更高。

比如，某設(shè)計(jì)的不會(huì)畫(huà)圖標(biāo)，于是TA在阿里圖標(biāo)庫(kù)把PNG的圖標(biāo)下載下來(lái)，然后在Ps里做視覺(jué)稿，然后前端切圖小弟又從PSD中把圖標(biāo)切出來(lái)，xx.png，[email protected]，有時(shí)候這些圖標(biāo)竟然還自帶背景色......

比如，某設(shè)計(jì)會(huì)畫(huà)圖標(biāo)，于是把通用圖標(biāo)畫(huà)了個(gè)遍，然后切圖......

只能說(shuō)：

這是個(gè)不怎么追求效率的時(shí)代
兼容性、可訪問(wèn)性

兼容性

字體圖標(biāo)是基于WebFont來(lái)實(shí)現(xiàn)的，WebFont的兼容性請(qǐng)看，caniuse WebFont。
再提供多種格式的字體的前提下，兼容性完全不是問(wèn)題。

可訪問(wèn)性

國(guó)內(nèi)很少關(guān)注這個(gè)吧，其實(shí)Font Awesome提供了相關(guān)的說(shuō)明，請(qǐng)看，Accessibility

太麻煩，還是之前切圖片圖標(biāo)方便

其實(shí)直接切出圖標(biāo)，如Sketch可以直接導(dǎo)出多種大小的圖標(biāo)。配合各類打包工具如Webpack，可以把小圖標(biāo)轉(zhuǎn)化成base64代碼。從某種意義上來(lái)說(shuō)確實(shí)挺方便，而且也支持Retina，也挺小。

其實(shí)這方案也行，不過(guò)，最重要的是可以把切圖標(biāo)的工作拋給設(shè)計(jì)師吧......

有時(shí)候根本不考慮Retina了，不考慮響應(yīng)式，不考慮移動(dòng)端了，不考慮......，總之先把項(xiàng)目趕出來(lái)。

歷史項(xiàng)目，改動(dòng)成本太高

有些項(xiàng)目確實(shí)是前輩沒(méi)有考慮到用字體圖標(biāo)，或者那時(shí)候還沒(méi)有這種技術(shù)。

但是有些最近的項(xiàng)目，那非?？赡苁乔拜呁诘目樱瑓^(qū)別是有意無(wú)意吧。不過(guò)大多數(shù)都不是故意的。趕而已，懶而已。

更多 & 參考

圖標(biāo)字體化淺談

其他

可以告訴我你不用字體圖標(biāo)的理由嗎？有些兼容、缺陷可能未能列舉出來(lái)，見(jiàn)諒歡迎補(bǔ)充。

我不用字體圖標(biāo)，我用kaomoji：(☆_☆)和emoji： ?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111572.html

相關(guān)文章

  • 前端不能放棄1200px的理由

    摘要：開(kāi)發(fā)過(guò)程中，可能會(huì)遇到這種情況電腦屏幕是寸，寸的，但是在瀏覽器中顯示寬度沒(méi)有達(dá)到自己屏幕的寬度，導(dǎo)致樣式把控上很不方便。以確保大多數(shù)筆記本的顯示情況是符合我們期望的那樣。前端技術(shù)交流群歡迎加入 開(kāi)發(fā)過(guò)程中，可能會(huì)遇到這種情況：電腦屏幕是13寸，14寸的，但是在瀏覽器中顯示寬度沒(méi)有達(dá)到自己屏幕的寬度，導(dǎo)致樣式把控上很不方便。 這種問(wèn)題多發(fā)現(xiàn)于筆記本電腦上，并不是說(shuō)臺(tái)式機(jī)上沒(méi)有這個(gè)問(wèn)題，而...

    PrototypeZ 評(píng)論0 收藏0

  • 前端不能放棄1200px的理由

    摘要：開(kāi)發(fā)過(guò)程中，可能會(huì)遇到這種情況電腦屏幕是寸，寸的，但是在瀏覽器中顯示寬度沒(méi)有達(dá)到自己屏幕的寬度，導(dǎo)致樣式把控上很不方便。以確保大多數(shù)筆記本的顯示情況是符合我們期望的那樣。前端技術(shù)交流群歡迎加入 開(kāi)發(fā)過(guò)程中，可能會(huì)遇到這種情況：電腦屏幕是13寸，14寸的，但是在瀏覽器中顯示寬度沒(méi)有達(dá)到自己屏幕的寬度，導(dǎo)致樣式把控上很不方便。 這種問(wèn)題多發(fā)現(xiàn)于筆記本電腦上，并不是說(shuō)臺(tái)式機(jī)上沒(méi)有這個(gè)問(wèn)題，而...

    wanghui 評(píng)論0 收藏0

  • 鳥(niǎo)瞰前端 , 再論性能優(yōu)化

    摘要：前端性能優(yōu)化的涉及點(diǎn)從服務(wù)器到協(xié)議再到宿主環(huán)境本身都要有比較深刻的認(rèn)識(shí)，業(yè)界目前主要還是以雅虎總結(jié)出來(lái)?xiàng)l前端性能優(yōu)化的黃金軍規(guī)為參考。 歡迎大家前往騰訊云技術(shù)社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 導(dǎo)語(yǔ) : 從事前端有6年+的時(shí)間了，從最開(kāi)始的美工到重構(gòu)再到偏向js邏輯開(kāi)發(fā)的前端開(kāi)發(fā)，一直在前端這個(gè)行業(yè)里面摸索和學(xué)習(xí)，我現(xiàn)在將自己這些年的一個(gè)心得體會(huì)來(lái)個(gè)系統(tǒng)性的梳理寫(xiě)成一篇關(guān)于性能優(yōu)化...

    voidking 評(píng)論0 收藏0

  • iconfront優(yōu)化項(xiàng)目圖標(biāo)

    摘要：為什么要使用圖標(biāo)字體使用這項(xiàng)技術(shù)總得有使用它的理由那么，我們來(lái)分析下的優(yōu)缺點(diǎn)，看是不是適合正在開(kāi)發(fā)的項(xiàng)目。優(yōu)化項(xiàng)目性能字體的加載速度快于圖片，就算圖片經(jīng)過(guò)合并。 為什么要使用圖標(biāo)字體 使用這項(xiàng)技術(shù)總得有使用它的理由！那么，我們來(lái)分析下iconfront的優(yōu)缺點(diǎn)，看是不是適合正在開(kāi)發(fā)的項(xiàng)目。 優(yōu)點(diǎn) 1、優(yōu)化項(xiàng)目工作流程 對(duì)于web前端項(xiàng)目中的圖標(biāo)，很多情況下是使用的png圖片，但如果圖標(biāo)...

    Karuru 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<