前言
近日在做項目時,項目組有提出iconfont的技術,便開始查詢相關資料。iconfont技術的主要目的是為減少應用體積而生。首先icon代表圖標 font代表字體。此技術便是將圖標轉化為字體,從而達到減小應用體積的目的(這樣避免了@2X圖和@3X圖的使用,只需要一個字體圖標就可搞定)。如需在項目中使用iconfont技術,圖標矢量圖一開始都應合並轉化為字體庫(這屬於UI設計師的工作了)。在這里會簡單說明怎么生成字體庫和簡單的使用!此技術缺點也很明顯,只適用於純色的icon!
字體庫生成
針對於字體庫的生成方案現在推薦大家用的有兩個圖標字體庫生成網站iconmoon和iconfon。本文以iconmoon為例,選擇好圖標后轉化為字體下載
基本使用
在個人項目工程中加入iconmoon.ttf字體庫,確保在copy bundle Resources中有添加入字體庫,然后在info.plist文件中增加字段Fonts provided by application並在該字段下添加icomoon.ttf。此時只需要在工程使用該字體即可。
在使用的時候需要配置字體名字,然后將對應圖標的Unicode編碼賦給text即可進行展示,對應圖標的Unicode編碼在字體下載中的html文件中查看
使用時只需要將對應的Unicode編碼轉化為text字符串即可,轉化方式為'\U0000 + 對應編碼'。示例如下:
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 50)]; //需要配置為對應的字體 label.font = [UIFont fontWithName:@"icomoon" size:24]; //配置上兩個對應圖標 label.text = @"\U0000e900 \U0000e91f"; //配置圖標顏色 [label setTextColor:[UIColor cyanColor]];
運行程序后便可得到如下效果圖:
以上便是iconfont的具體運用方法,有想法的朋友可以直接去試一試了。關於此種技術的使用效率問題和其他生成方式都在參考鏈接中可以查找到。本文旨在提供最基本的使用方法給大家,如上述有不正確之處歡迎指出!
參考鏈接