一、移動端App中的字體圖標Icon Fonts應(yīng)用
一、Icon Fonts：移動端自適應(yīng)設(shè)計的絕佳選擇
在追求自適應(yīng)設(shè)計的道路上，Icon Fonts作為一種可縮放的解決方案，正受到越來越多的關(guān)注。在開發(fā)native app時，了解icon fonts技術(shù)的優(yōu)勢，無疑將為你的設(shè)計工作流程帶來深遠的影響。
可縮放性
基于字體的icon擁有無與倫比的分辨率適應(yīng)性，可輕松縮放到任何所需尺寸。無論是面對retina、HDPI、XHDPI等屏幕，icon font都能根據(jù)目標設(shè)備自動調(diào)整大小。這意味著你將能夠輕松應(yīng)對當前、未來或大多數(shù)任意規(guī)格的設(shè)備。
尺寸優(yōu)勢
相較于位圖，icon font的文件大小簡直小得驚人。使用icon font時，你無需為不同的設(shè)備準備多種圖片，只需在APP啟動時加載一次icon font文件即可。這無疑大大提高了效率和用戶體驗。
可維護性
一旦你的icon打包進字體文件，整個項目期間你只需要維護這個單一的字體文件。通過管理字體文件，你可以輕松地組織icon集合，隨時進行修改或擴展，極大地提高了工作的可維護性。
推廣與應(yīng)用
盡管應(yīng)用icon fonts可能會對工作流程產(chǎn)生影響，但說服團隊采用這一技術(shù)卻相對簡單。多款免費或收費的工具能幫助你輕松實現(xiàn)目標，讓你在幾乎任何移動平臺、瀏覽器或操作系統(tǒng)上都能看到出色的應(yīng)用效果。
靈活性與交互性
Icon fonts最大的亮點在于其靈活性和交互性。你可以輕松改變icon的顏色和大小，只需幾行代碼，就能瞬間改變外觀。由于可以通過代碼方便地操縱，icon fonts在運行時展現(xiàn)出獨特的交互性。你可以輕松地為不同狀態(tài)顯示不同的效果，創(chuàng)建動畫，為用戶提供更豐富的體驗。
盡管icon fonts為設(shè)計提供了眾多好處并為有趣的設(shè)計提供了可能性，但它并非萬能的解決方案。對于復(fù)雜的視覺設(shè)計和多顏色需求，icon font可能存在一定的局限性。但無論如何，主流與非主流的icon fonts都能在互聯(lián)網(wǎng)上找到，并在web設(shè)計界廣泛應(yīng)用。
二、替換App圖標為何失敗？
在嘗試替換App圖標的過程中，你可能會遇到一些挑戰(zhàn)。為了成功完成這一任務(wù)，首先你需要安裝一個強大的圖形處理工具——ImageMagick。這款軟件專門通過終端進行工作，而Homebrew則是安裝它的簡便途徑。
如果你尚未安裝Homebrew，或者對其不太了解，可以在官網(wǎng)上進行學習并安裝。一旦Homebrew安裝完畢，打開終端并輸入“brew update”，這個命令將確保你擁有最新的安裝包并確認Homebrew已成功安裝。
接下來，通過Homebrew安裝你所需要的ImageMagick。安裝完成后，你就可以使用它來處理圖像，克服替換圖標的難題。具體的操作步驟和可能遇到的問題，將在后續(xù)的內(nèi)容中詳細闡述。安裝和使用ImageMagick與Ghostscript教程
====================
一、安裝ImageMagick
在終端中輸入以下命令，Homebrew將會展示ImageMagick安裝的詳細過程。跟著步驟進行安裝。
```bash
brew install ImageMagick
```
二、安裝Ghostscript
ImageMagick的某些功能需要依賴Ghostscript，這是一個用于呈現(xiàn)PDF和PS文件的軟件套件。為了支持ImageMagick的字體，我們需要安裝Ghostscript。
使用以下命令進行安裝：
```bash
brew install ghostscript
```
三、解決安裝過程中可能遇到的問題
如果在安裝過程中遇到錯誤，可以嘗試運行以下命令進行診斷：
```bash
brew doctor
```
如果安裝失敗，該命令將提供一條消息以及相應(yīng)的修復(fù)建議。
四、ImageMagick的基本命令介紹
在本教程中，你將接觸到ImageMagick的兩個主要命令：convert和composite。
convert命令：用于修改圖片并保存為新的圖片。
composite命令：用于在一張圖片上覆蓋另一張圖片，然后保存為新的第三張圖片。
五、教程所需準備與操作
1. 下載本教程提供的簡單地圖標或者自己的圖標，將其放置在桌面上。
2. 進入放應(yīng)用程序圖標的文件夾。在終端中輸入以下命令：
```bash
cd ~/Desktop/AppIconSet
```
3. 使用convert命令在圖標上添加“Hello World”文本。輸入以下命令：
```bash
convert -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" test.png
```
命令分解：
：輸入圖片的名字。
-fill white：設(shè)置文本顏色為白色。
-font Times-Bold：指定使用的字體。
-pointsize 18：設(shè)置字體大小為18。
-gravity south：設(shè)置文本與圖片的底部對齊。
-annotate 0 "Hello World"：在圖片上添加“Hello World”文本，旋轉(zhuǎn)角度為0度。
test.png：輸出的文件名，ImageMagick將會覆蓋已存在的文件。至此，你已經(jīng)成功使用ImageMagick在圖標上添加了“Hello World”文本。接下來，你可以根據(jù)需要使用這個圖標。關(guān)于終端上圖像處理與Xcode集成的指南
一、終端圖像處理準備
在終端上，如果你沒有遇到任何錯誤，那么你會在AppIconSet文件夾中看到一個名為test.png的文件。打開它，你將看到一張?zhí)囟ǖ膱D片。
二、錯誤排查與字體安裝
如果你在操作過程中看到錯誤消息，可能是因為缺少必要的字體。為了解決這個問題，你可以運行以下命令來查看已安裝的字體列表：
convert-list font
如果你發(fā)現(xiàn)缺少Times字體，那么你需要選擇一個已安裝的字體來代替。
三、加載Beta標志
接下來，將beta標志加載到圖片上。在終端中輸入以下命令：
composite betaRibbon.png test.png test2.png
這個命令會將betaRibbon.png置于test.png之上，并將合成后的圖片保存為test2.png。
四、圖片尺寸問題
當你打開test2.png時，可能發(fā)現(xiàn)顯示的仍然是原來的test.png。這是因為betaRibbon.png的尺寸（1024x1014）遠大于test.png（120x120）。為了解決這個問題，你需要調(diào)整betaRibbon.png的尺寸。使用ImageMagick的convert命令可以輕松實現(xiàn)：
convert betaRibbon.png -resize 120x120 smallBetaRibbon.png
執(zhí)行這條命令后，betaRibbon.png將被調(diào)整為120x120的尺寸，并保存為smallBetaRibbon.png。
五、重新組合圖片
現(xiàn)在，你可以再次使用composite命令將調(diào)整后的smallBetaRibbon.png與test.png合并：
composite smallBetaRibbon.png test.png test2.png
打開test2.png，你將看到帶有beta標志的圖片。至此，你已經(jīng)成功使用ImageMagick完成了圖片處理。這只是ImageMagick強大功能的一部分。你可以訪問ImageMagick的主頁了解更多詳細信息。接下來，我們將回到Xcode進行后續(xù)操作。
六、Xcode集成
在完成圖像處理工作后，回到Xcode平臺。創(chuàng)建一個新的iOS項目，選擇Single View Application，然后命名你的項目為Llama Trot。選擇Swift作為開發(fā)語言，并設(shè)置設(shè)備為Universal。將項目保存在桌面上。
你的目標是通過Xcode和ImageMagick的結(jié)合使用，根據(jù)所選的構(gòu)建配置，在每次構(gòu)建時生成一個適當?shù)膱D標。幸運的是，Xcode允許你在項目構(gòu)建時運行腳本。這些腳本就像你已經(jīng)熟悉的終端命令一樣，可以在每次運行Xcode項目時自動執(zhí)行。接下來，你可以根據(jù)你的項目需求編寫相應(yīng)的腳本，將處理后的圖片集成到你的iOS項目中。設(shè)置運行腳本：工程中的新旅程
一、引入與設(shè)置
在你的工程項目中，我們首先需要選擇一個目標（Target），即選擇“Build Phases”。點擊"+"按鈕，在彈出的菜單中選擇“New Run Script Phase”。此刻，你已經(jīng)成功地為你的工程添加了一個新的運行腳本階段。
二、Shell環(huán)境與腳本編寫
當運行腳本時，Shell參數(shù)被自動設(shè)置為bin/sh，這意味著你的腳本將在bash Unix shell環(huán)境中執(zhí)行。你需要在提供的框中輸入你的腳本指令。例如，一個簡單的指令：echo "Hello World"。執(zhí)行后，你的新的 build phase 應(yīng)當會在構(gòu)建并運行時打印出這條信息。值得注意的是，"Hello World"將出現(xiàn)在你的構(gòu)建日志中。
三、探索構(gòu)建報告
要查看構(gòu)建詳情，你可以點擊Xcode導航欄面板最右邊的圖標——“Report Navigator”。這里展示了當你構(gòu)建一個工程時，Xcode所做的所有事情。在這里，你將會看到之前打印的"Hello World"。
四、應(yīng)用圖標的引入與修改
接下來，我們要修改應(yīng)用的圖標。將所有的應(yīng)用圖標添加到“Images.xcassets”文件夾中，然后將每個圖標拖到對應(yīng)的AppIcon尺寸位置上。還需將debugRibbon.png和 betaRibbon.png放在與.xcodeproj同級的目錄文件中。
為了讓腳本知道圖標的位置，我們需要修改之前的腳本。使用以下代碼替代原先的腳本：
echo "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}" 和 echo "${SRCROOT}"。這兩行代碼分別打印項目運行后的資源路徑和項目文件所在的文件夾路徑。通過這些路徑，我們可以找到并操作我們的應(yīng)用圖標。
五、查看與驗證
運行你的項目并查看構(gòu)建報告。你將看到描述你的工程最后產(chǎn)品的文件路徑。在這個路徑下，你將找到你的項目工程所在的文件路徑以及存放ImageMagick修改后的圖標的位置。通過右擊“Application icon”并選擇“Show Package Contents”，你將能夠看到這些圖標已經(jīng)成功更新。在項目的文件夾中，你可以找到“Images.xcassets”文件夾，其中包含了新的AppIcon.appiconset文件。
至此，你已經(jīng)成功地在你的項目中設(shè)置了一個新的運行腳本，并修改了應(yīng)用的圖標。接下來，你可以繼續(xù)探索更多Xcode的功能，為你的應(yīng)用添加更多的特性和功能。應(yīng)用圖標管理：從定位到修改
一、應(yīng)用圖標的位置
你的應(yīng)用圖標位于一個特定的文件夾中，路徑為~/Desktop/Llama Trot/Llama Trot/Images.xcassets/AppIcon.appiconset。這些圖標是你的應(yīng)用程序的重要識別元素，因此正確地管理和定位它們是至關(guān)重要的。
二、獲取圖標完整路徑
要獲取特定圖標的完整路徑，如AppIcon60x60@2x.png，你可以使用以下的腳本。這個腳本會遞歸地在${SRCROOT}文件夾中搜索這個文件。
設(shè)置IFS（內(nèi)部字段分隔符）為換行符，以確保文件名中的空格不會干擾腳本的運行。然后，使用find命令搜索文件的完整路徑。
三、處理應(yīng)用圖標
接下來，我們要通過腳本來修改應(yīng)用的圖標。我們將從基礎(chǔ)圖像開始，比如AppIcon60x60@2x.png。然后，我們將使用ImageMagick的技術(shù)來處理這個圖像。在這個過程中，你可能需要在Retina@2x的模擬器或者6Plus上進行測試。
四、腳本的編寫與解析
結(jié)合之前的腳本和ImageMagick的技術(shù)，我們可以編寫一個新的腳本來修改應(yīng)用圖標。這個腳本首先會設(shè)置一些必要的環(huán)境變量，然后找到目標圖標的路徑，接著對基礎(chǔ)圖像進行處理，最后在目標路徑上應(yīng)用處理過的圖像。
讓我們逐行解析這個腳本：
1. 設(shè)置IFS為換行符，避免文件名中的空格引起的問題。
2. 添加/user/local/bin到PATH變量，這是Homebrew安裝的地方，確保腳本可以訪問到必要的命令。
3. 設(shè)置目標圖標的路徑。
4. 使用find命令找到基礎(chǔ)圖像的路徑。
5. 使用convert命令對基礎(chǔ)圖像進行處理，例如調(diào)整大小。
6. 再次使用convert命令，這次是在基礎(chǔ)圖像上添加文字或進行其他修改。然后將處理過的圖像復(fù)制到目標路徑。
五、總結(jié)
章節(jié)一：獲取并處理應(yīng)用圖標
接下來的步驟是獲取本地的應(yīng)用圖標。我們首先從文件系統(tǒng)中獲取應(yīng)用圖標的路徑，然后將該路徑保存到TARGET_PATH和BASE_IMAGE_PATH變量中。這些變量將用于后續(xù)的圖像處理操作。
章節(jié)二：調(diào)整圖標尺寸
緊接著，我們將betaRibbon.png圖標的尺寸調(diào)整為合適的大小。這一步驟確保了圖標在不同設(shè)備和屏幕尺寸上都能良好地顯示。
章節(jié)三：合成并保存圖標
在最后一行代碼中，我們在原始的應(yīng)用圖標上添加了"Hello World"文本。然后，使用合成功能將帶有beta標識的圖片放置在其上，并將最終的圖片保存為應(yīng)用的圖標。這樣一來，你的應(yīng)用圖標就煥然一新了。
章節(jié)四：應(yīng)用圖標命名約定
需要注意的是，應(yīng)用程序圖標的命名并非隨意。在最終的產(chǎn)品中，圖標的命名必須遵循特定的約定，如AppIcon60x60@2x.png。Xcode會根據(jù)設(shè)備使用此命名約定來確定使用哪個圖標。在運行項目后，你的設(shè)備主屏幕上顯示的將是按照這些約定處理過的應(yīng)用圖標。
章節(jié)五：處理多個圖標以適應(yīng)不同設(shè)備
現(xiàn)在你已經(jīng)處理了一個圖標，接下來需要將這個處理過程應(yīng)用于所有的圖標，以適應(yīng)不同的設(shè)備顯示，如iPad、iPhone 6+等。為此，我們將修改腳本，將其封裝為一個函數(shù)，以圖標名稱為參數(shù)。然后，為每個圖標執(zhí)行該函數(shù)。
修改后的腳本如下：
首先設(shè)置環(huán)境變量和函數(shù)定義：
PATH=${PATH}:/usr/local/bin
IFS=$''
function generateIcon {
定義函數(shù)參數(shù)和路徑變量：
BASE_IMAGE_NAME=$1
TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
獲取圖標原始尺寸并調(diào)整betaRibbon尺寸：
WIDTH=$(identify -format '%w' ${BASE_IMAGE_PATH})
convert betaRibbon.png -resize ${WIDTH}x${WIDTH} resizedRibbon.png
合成新圖標并保存：
convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize 18 -gravity south -annotate 0 "Hello World" - composite resizedRibbon.png ${TARGET_PATH}
調(diào)用函數(shù)處理多個圖標：
generateIcon ""
generateIcon ""
generateIcon "AppIcon76x76~ipad.png"
generateIcon "AppIcon76x76@2x~ipad.png"
通過這樣的修改，整個圖像處理代碼被封裝為一個函數(shù)，你可以將圖標的名稱作為參數(shù)傳遞給這個過程。腳本會自動處理圖標尺寸、合成并保存新的圖標，以適應(yīng)不同的設(shè)備和屏幕尺寸。使用ImageMagick的Identity功能：動態(tài)調(diào)整圖標字體大小
一、發(fā)現(xiàn)ImageMagick的新功能：Identity
你將會發(fā)現(xiàn)ImageMagick的一個新功能——Identity。這個功能能獲取圖片的信息，讓你更好地處理和操作圖像。在這里，我們將利用Identity功能獲取圖片的寬度信息，用于調(diào)整圖片的大小。
二、為不同設(shè)備設(shè)置模擬器
為了適配不同設(shè)備的屏幕像素密度，選擇一個iPad或者一個iPhone6+的模擬器來運行你的項目。因為字體的大小是用像素表示的，不同的設(shè)備屏幕有不同的像素密度，所以這一步非常關(guān)鍵。
三、動態(tài)設(shè)置文本高度
根據(jù)整個圖標的大小來設(shè)置文本的高度是非常重要的。為了實現(xiàn)這一點，你需要在設(shè)置WIDTH變量的地方加入一段腳本，通過這段腳本，你可以根據(jù)圖片的寬度動態(tài)地設(shè)置字體大小。由于Unix算術(shù)不支持浮點運算，我們需要使用bc程序來處理浮點類型的計算。
四、修改腳本以使用動態(tài)字體大小
現(xiàn)在，我們來修改腳本以使用動態(tài)設(shè)置的字體大小。在generateIcon函數(shù)中，我們使用Identify獲取圖片的寬度，并計算適當?shù)淖煮w大小。然后，我們將使用convert命令對圖片進行處理，包括調(diào)整大小和添加文本。在添加文本時，我們將使用動態(tài)設(shè)置的字體大小。
五、運行項目并觀察效果
運行你的項目在不同的設(shè)備上。你會發(fā)現(xiàn)，通過動態(tài)設(shè)置字體大小，你的圖標在不同的設(shè)備上顯示得更加完美。這一步是驗證你的成果的時刻，你會看到通過ImageMagick的Identity功能，你能夠輕松地實現(xiàn)圖像的動態(tài)適配。
腳本示例：
```bash
設(shè)置環(huán)境變量和函數(shù)
PATH=${PATH}:/usr/local/bin
IFS=$''
function generateIcon(){
BASE_IMAGE_NAME=$1
TARGET_PATH="${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/${BASE_IMAGE_NAME}"
BASE_IMAGE_PATH=$(find ${SRCROOT} -name ${BASE_IMAGE_NAME})
WIDTH=$(identify -format '%w' ${BASE_IMAGE_PATH}) 使用Identity獲取圖片寬度
FONT_SIZE=$(echo "${WIDTH}.15" | bc) 計算字體大小
convert betaRibbon.png -resize ${WIDTH}x${WIDTH} resizedRibbon.png 調(diào)整圖片大小
convert ${BASE_IMAGE_PATH} -fill white -font Times-Bold -pointsize ${FONT_SIZE} -gravity south -annotate 0 "Hello World" -composite resizedRibbon.png -${TARGET_PATH} 添加文本并合成圖片
}
調(diào)用函數(shù)生成圖標
generateIcon ""
generateIcon ""
generateIcon "AppIcon76x76~ipad.png"
generateIcon "AppIcon76x76@2x~ipad.png"
```
現(xiàn)在，你可以運行你的項目在不同的設(shè)備上，觀察效果并享受使用ImageMagick的Identity功能帶來的便利。三、微信小程序引入阿里巴巴矢量圖標庫icon-font
=========================
微信小程序開發(fā)過程中，經(jīng)常會需要用到圖標來豐富界面和提升用戶體驗。阿里巴巴矢量圖標庫icon-font是一個豐富的圖標資源，可以輕松引入微信小程序中。下面是詳細的引入步驟：
一、選擇并添加所需圖標
打開iconfont-阿里巴巴矢量圖標庫的官網(wǎng)，從中挑選你需要的圖標。挑選完畢后，點擊圖標的“購物車”按鈕，將選中的圖標添加到你的項目中。
二、將圖標庫添加至小程序項目
確認所需圖標都已經(jīng)添加到購物車后，點擊“添加至項目”按鈕，這樣圖標庫就會被添加到你的微信小程序項目中。
三、獲取并復(fù)制圖標代碼
在成功添加圖標至項目后，通常會生成一個在線鏈接。這個鏈接包含了你項目所需的圖標代碼。復(fù)制這個鏈接中的圖標代碼。
四、在小程序中引入圖標代碼
打開你的微信小程序開發(fā)者工具，在項目的結(jié)構(gòu)中，新建一個名為“styles”的文件夾。在這個文件夾中，創(chuàng)建一個名為“iconfont.wxss”的文件，并將之前復(fù)制的代碼粘貼進去。
五、使用圖標
確保你的app.wxss文件中已經(jīng)引入了“iconfont.wxss”文件，這樣你就可以在整個小程序中使用這些圖標了。在需要顯示圖標的地方，給對應(yīng)的元素添加帶有特定class的class屬性，圖標就會根據(jù)你所設(shè)定的class顯示出來。
至此，你已經(jīng)成功地在微信小程序中引入了阿里巴巴的矢量圖標庫，并可以在小程序中靈活使用這些圖標。整個過程無需使用額外的同步工具，完全在小程序的開發(fā)流程內(nèi)完成，極大地簡化了圖標引入的復(fù)雜性和提高了開發(fā)效率。無論是頁面布局還是按鈕裝飾，這些矢量圖標都能為你的小程序增添更多的可能性和創(chuàng)意。
