當前位置:首頁 » 生產設備 » iconfont字體如何在移動設備應用

iconfont字體如何在移動設備應用

發布時間: 2021-01-05 21:46:52

A. 如何在移動端app中應用字體圖標icon fonts

對於可縮放的自適應設計來講,Icon fonts是一種驚人的解決方案。

在開發native app時,你應該記住icon fonts技術有多項超過點陣圖的高級特性,這些特性所帶來的好處會影響你的設計工作流,以及產品的最終品質。

可縮放性(Scalability):

基於字體的icon是與解析度無關並能縮放到任何想要程度的技術。你的圖標看起來毫不關心retina,HDPI,XHDPI等等屏幕,但渲染時會根據目標設備自動調整,你將有能力應對任何當下,未來,或大多數任意規格的設備

尺寸(Size ):

裁剪到正確的比例,icon font的文件的大小要比起點陣圖小到難以置信的程度,使用icon font時,你不需要根據不同設備准備不同的圖片,你的APP只需要在啟動時載入一次icon font文件即可。

可維護性( Maintainability ):

自你的icon打包進一個字體文件,在項目自始至終你僅需要維護這個單一的字體文件。

通過管理字體文件你可以很自然的組織你的icon集合,任意的進行修改或擴展

可推廣性(Adoption):

然而,應用這樣的icon fonts可能會影響你和你同事之間的工作流程,但說服讓他們採用這樣的技術也非常簡單,有數款免費或收費的工具幫你輕松達到目的並能看到很好的應用結果,在幾乎任意(手機)移動平台、瀏覽器或操作系統

靈活性(Flexibility):

應用icon fonts技術中最有意義的一項能力是可以操縱icon fonts, 改變顏色,大小,僅僅幾行代碼就可以在瞬間改變外觀

可交互性(Interactivity):

由於靈活性以及能夠通過代碼方便的操縱,icon fonts 是獨一無二的在運行時被操縱,通過應用icon fonts技術, 你能輕松的在不同狀態顯示對應的不同效果,創建動畫。

雖然icon
fonts為設計提供了眾多好處為一些有趣的設計提供可能性,自然地,它也不是全權的解決方案。一旦你的設計中需要的顏色超過一種,實現復雜的視覺設
計,icon font就有限制了。無認如何,主流與非主流的icon
fonts都能在互聯網上找到,在我們使用之前web設計界已經很流行了,並有很多服務幫你創建夢幻的icon fonts集合

通過xcode中的outlet connection, 在view呈現後,你還能很方便的改變label

Using icon fonts on iOS

在IOS中使用字體圖標

在IOS中應用icon font非常的簡單粗爆。在一開始你最好通過使用Fontello或IcoMoon收集一些圖標並整合進你的APP。另一種方法是你自己花時間自己做出來,但創造性的工作的總要花掉你很多時間。

那麼現在我們僅僅需要將得到的icon整合進我們的APP

你只需要懂得IOS開發基本的文件結構以及.tff後綴的字體文件icon font

為了測試icon font技術,我們在Xcode內新建一個 Single View Application 的工程。工程建完後就把你的字體文件復制進工程目錄,如果不出什麼意外,你應該在你的 Project Navigator 中看到對應的字體文件了

為了讓Xcode理解你將要如何使用導入的文件,你得在你的應用程序的Info.plist內建立「鏈接」。這個plist文件在Supporting
Files文件夾內,表現為meta
data即可理解為hash表。為了在編譯app時能包含進你的字體文件,在list上簡單新建一行(右鍵然後add row)名字選擇為 Fonts provided by application ,在其下給字體文件取個名字,名字就是你的應用程序中用來識別你的字體文件的。在我們這個測試工程中,值為fontello.ttf。現在Xcode知道了我們導入的文件能幹什麼,我們能在程序中使用導入的字體文件了

把你的app切換到storyboard模式,在view中你喜歡的地方放一個label組件用來顯示icon,在設置完label後,我們需要建立一個outlet。

在storyboard中做這些事情都很簡單,在 Assistant Editor Mode模式下

此模式下顯示了你的圖形界面和ViewController界面。現在簡單的按住ctrl鍵,從label組件拖動就會現線條,直接拖線條到
ViewController到@interface這行代碼上放開就會彈出一個小界面,輸入名稱,比如
iconLabel,outlet就建成了,代碼中你會發現多了下面這樣一行:

@property (weak, nonatomic) IBOutlet UILabel *iconLabel

現在你就能通過代碼來控制label組件了,通過編輯ViewController(.m後綴的文件)設置label。在viewDidload方法內加入以下幾行代碼,就像下面那樣

( void)viewDidLoad{
[super viewDidLoad];

[iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]];
[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}

添加的第一條代碼用來定義字體應用於label並設置字型大小,這里我們設置了130pt

在使用這些命令時要注意字體名稱,這里要填寫字體的真實名稱,即在字體簿打開的字體名或任何其它編輯器內能顯示的字體名稱。特別注意這點,因為字體名很可能與字體文件名稱不一樣

在第二行中文字用Unicode字元 Hammer and Pick (2692) 編碼。

雖然有點神秘,獲取icon字體的unicode字元編碼還是比較容易的。可以使用字體編輯器,或者直接上傳到Icon Moon這類網站,你可以毫不費力的將icon字體轉換成unicode編碼

你可以通過Android XML 語法來申明任何你想要的UI屬性

Colours, gradients and shadows

現在icon「引用」已經建立,你都搞定了。在我們通過代碼操作label前,你得先運行看看你的工作成果。最終,這也是你將icon字體合並進app所要做的。從現在開始有趣的事兒才開始。文本的所有操作都由你掌控了,例如:顏色,透明度,漸變,陰影。

例如應用以下幾行代碼 ,讓icon變成紅色+陰影:

iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

有許多效果可以使用。一些相對來說比較復雜,但所有文本效果都通用。動畫或任何復雜的操作只要你能想到的都可以做了

Using icon fonts on Android

在Android中應用字體圖標

同樣的,在開發Android應用時也一樣能使用icon fonts就像用在ios上面一樣,能得到一樣的好處。

就應用范圍而言,Android更加有意思更有用。因為Android有著更多不同解析度,不同屏幕的設備平台。最重要的是Android默認不支持矢量圖形,這對開發者和設計人員面對不同Android設備時可是一個重大打擊

在開始開發你的新Android應用之前,你僅需要知道一個app最基本的文件構架,同樣的icon
font文件也是.tff後綴,使用包含了Android ADT的Eclipse IDE,你可以開始新建一個Blank
Activity的Android Application
Project。在項目設置後,復雜.tff文件到你的資源文件目錄內。一旦復製成功,Package Explorer面板內應該能看到

接下來,在你的Main Activity
View內創建一個TextView。你可以在layout文件夾內找到你的資源文件。文件名應該是
activity_main.xml。在多數情況下,Android SDK已經將一個文本為「Hello
world」的TextView放到了你的View內,我們就能使用這個TextView了。

在定義Icon各屬性後,你能在模擬器內看到你的icon了。

為了操作TextView,我們需要將圖形模式切換到切換到XML View內。現在為TextView添加一個ID,以便接下來UI和代碼建立引用關系

你的TextView應該看起來像下面這樣

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />

通過使用ID,我們能夠在APP內任何地方操作TextView。現在你可以切換到MainActivity.java文件添加一些代碼來載入icon font了。在 MainActivity內有一個方法名為onCreate的方法。載入和應用icon fonts都在此方法內,如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");

和上面的IOS例子很像,通過引用到label組件,我們告訴Android應該使用哪個自定義字體到TextView上面。之後幾行使用Unicode字元編碼,這次以JAVA方式而已。運行程序後你就可以看到你的icon在Main Activity的View上了

在應用成功後,你可以根據你的需要操作icon了。Android UI構建通常由interface
builder或組織XML文件來實現,要添加一些效果,只要回到Main Activity的XML部分找到添加了Label
ID的地方,添加一些代碼就可。例如添加以下代碼會讓你的icon變大,帶點透明的紅色,並伴有陰影。
android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />

有很多的效果可以應用。就像在IOS中一樣,動畫或者復雜的操作都由你掌控了。最大的好處是自定義的icon fonts可以廣泛的適配各類操作系統。任何支持自定義icon fonts的平台都允許你使用全新的這些效果

B. 如何在移動端app中應用字體圖標icon fonts

當在設計產品UI時,我們許多美工都盡量不使用像素圖片,而更傾向於使用矢量圖,版是有各種原因的。舉個粟子,權在一個需要快速變更需求又要求保質的的團隊中工作。
保持文件大小的可維護,以及讓UI能適應各種尺寸屏幕,這些都是矢量圖形應用時的小功能。
矢量圖形能讓你在一個長期的項目不會抓狂的渡過。
在面對自適應、載入時間或retina屏等問題時,基於矢量圖形的解決方案已成為基本解決方案了,就像CSS效果,為不同用戶設計高質量的WEB UI,由於近期瀏覽器在自定義字體上的較好的支持,很多美工甚至將它們的icons做成web fonts,這一樣是基於矢量圖形好處理由。

C. android 如何動態使用iconfont

public class exp2{ public static void main(String args[]){ int i=0;
math mymath = new math(); for(i=2;i<=200;i++) if(mymath.isshu(i)==true)
System.out.println(i);
}
}class math
{ public int f(int x)
{ if(x==1 || x==2) return 1; else
return f(x-1)+f(x-2);
}public boolean isshu(int x)
{ for(int i=2;i<=x/2;i++) if (x % 2==0 ) return false; return true;
}
}

D. 如何在移動端app中應用字體圖標iconfonts

你應該記住icon fonts技術有多項超過點陣圖的高級特性,這些特性所帶來的好處會影響你的設計工作流,以及產品的最終品質。

E. 移動應用中字體圖標怎麼製作

對於可縮放的自適應設計來講,Icon fonts是一種驚人的解決方案。

在開發native app時,你應該記住 fonts技術有多項超過點陣圖的高級特性,這些特性所帶來的好處會影響你的設計工作流,以及產品的最終品質。

可縮放性(Scalability):

基於字體的icon是與解析度無關並能縮放到任何想要程度的技術。你的圖標看起來毫不關心retina,HDPI,XHDPI等等屏幕,但渲染時會根據目標設備自動調整,你將有能力應對任何當下,未來,或大多數任意規格的設備

尺寸(Size ):

裁剪到正確的比例,icon font的文件的大小要比起點陣圖小到難以置信的程度,使用icon font時,你不需要根據不同設備准備不同的圖片,你的APP只需要在啟動時載入一次icon font文件即可。

可維護性( Maintainability ):

自你的icon打包進一個字體文件,在項目自始至終你僅需要維護這個單一的字體文件。

通過管理字體文件你可以很自然的組織你的icon集合,任意的進行修改或擴展

可推廣性(Adoption):

然而,應用這樣的icon fonts可能會影響你和你同事之間的工作流程,但說服讓他們採用這樣的技術也非常簡單,有數款免費或收費的工具幫你輕松達到目的並能看到很好的應用結果,在幾乎任意(手機)移動平台、瀏覽器或操作系統

靈活性(Flexibility):

應用icon fonts技術中最有意義的一項能力是可以操縱icon fonts, 改變顏色,大小,僅僅幾行代碼就可以在瞬間改變外觀

可交互性(Interactivity):

由於靈活性以及能夠通過代碼方便的操縱,icon fonts 是獨一無二的在運行時被操縱,通過應用icon fonts技術, 你能輕松的在不同狀態顯示對應的不同效果,創建動畫。

雖然icon
fonts為設計提供了眾多好處為一些有趣的設計提供可能性,自然地,它也不是全權的解決方案。一旦你的設計中需要的顏色超過一種,實現復雜的視覺設
計,icon font就有限制了。無認如何,主流與非主流的icon
fonts都能在互聯網上找到,在我們使用之前web設計界已經很流行了,並有很多服務幫你創建夢幻的icon fonts集合

通過xcode中的outlet connection, 在view呈現後,你還能很方便的改變label

Using icon fonts on iOS

在IOS中使用字體圖標

在IOS中應用icon font非常的簡單粗爆。在一開始你最好通過使用Fontello或IcoMoon收集一些圖標並整合進你的APP。另一種方法是你自己花時間自己做出來,但創造性的工作的總要花掉你很多時間。

那麼現在我們僅僅需要將得到的icon整合進我們的APP

你只需要懂得IOS開發基本的文件結構以及.tff後綴的字體文件icon font

為了測試icon font技術,我們在Xcode內新建一個 Single View Application 的工程。工程建完後就把你的字體文件復制進工程目錄,如果不出什麼意外,你應該在你的 Project Navigator 中看到對應的字體文件了

為了讓Xcode理解你將要如何使用導入的文件,你得在你的應用程序的Info.plist內建立「鏈接」。這個plist文件在Supporting
Files文件夾內,表現為meta
data即可理解為hash表。為了在編譯app時能包含進你的字體文件,在list上簡單新建一行(右鍵然後add row)名字選擇為 Fonts provided by application ,在其下給字體文件取個名字,名字就是你的應用程序中用來識別你的字體文件的。在我們這個測試工程中,值為fontello.ttf。現在Xcode知道了我們導入的文件能幹什麼,我們能在程序中使用導入的字體文件了

把你的app切換到storyboard模式,在view中你喜歡的地方放一個label組件用來顯示icon,在設置完label後,我們需要建立一個outlet。

在storyboard中做這些事情都很簡單,在 Assistant Editor Mode模式下

此模式下顯示了你的圖形界面和ViewController界面。現在簡單的按住ctrl鍵,從label組件拖動就會現線條,直接拖線條到
ViewController到@interface這行代碼上放開就會彈出一個小界面,輸入名稱,比如
iconLabel,outlet就建成了,代碼中你會發現多了下面這樣一行:

@property (weak, nonatomic) IBOutlet UILabel *iconLabel

現在你就能通過代碼來控制label組件了,通過編輯ViewController(.m後綴的文件)設置label。在viewDidload方法內加入以下幾行代碼,就像下面那樣

( void)viewDidLoad{
[super viewDidLoad];

[iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]];
[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}

添加的第一條代碼用來定義字體應用於label並設置字型大小,這里我們設置了130pt

在使用這些命令時要注意字體名稱,這里要填寫字體的真實名稱,即在字體簿打開的字體名或任何其它編輯器內能顯示的字體名稱。特別注意這點,因為字體名很可能與字體文件名稱不一樣

在第二行中文字用Unicode字元 Hammer and Pick (2692) 編碼。

雖然有點神秘,獲取icon字體的unicode字元編碼還是比較容易的。可以使用字體編輯器,或者直接上傳到Icon Moon這類網站,你可以毫不費力的將icon字體轉換成unicode編碼

你可以通過Android XML 語法來申明任何你想要的UI屬性

Colours, gradients and shadows

現在icon「引用」已經建立,你都搞定了。在我們通過代碼操作label前,你得先運行看看你的工作成果。最終,這也是你將icon字體合並進app所要做的。從現在開始有趣的事兒才開始。文本的所有操作都由你掌控了,例如:顏色,透明度,漸變,陰影。

例如應用以下幾行代碼 ,讓icon變成紅色+陰影:

iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

有許多效果可以使用。一些相對來說比較復雜,但所有文本效果都通用。動畫或任何復雜的操作只要你能想到的都可以做了

Using icon fonts on Android

在Android中應用字體圖標

同樣的,在開發Android應用時也一樣能使用icon fonts就像用在ios上面一樣,能得到一樣的好處。

就應用范圍而言,Android更加有意思更有用。因為Android有著更多不同解析度,不同屏幕的設備平台。最重要的是Android默認不支持矢量圖形,這對開發者和設計人員面對不同Android設備時可是一個重大打擊

在開始開發你的新Android應用之前,你僅需要知道一個app最基本的文件構架,同樣的icon
font文件也是.tff後綴,使用包含了Android ADT的Eclipse IDE,你可以開始新建一個Blank
Activity的Android Application
Project。在項目設置後,復雜.tff文件到你的資源文件目錄內。一旦復製成功,Package Explorer面板內應該能看到

接下來,在你的Main Activity
View內創建一個TextView。你可以在layout文件夾內找到你的資源文件。文件名應該是
activity_main.xml。在多數情況下,Android SDK已經將一個文本為「Hello
world」的TextView放到了你的View內,我們就能使用這個TextView了。

在定義Icon各屬性後,你能在模擬器內看到你的icon了。

為了操作TextView,我們需要將圖形模式切換到切換到XML View內。現在為TextView添加一個ID,以便接下來UI和代碼建立引用關系

你的TextView應該看起來像下面這樣

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />

通過使用ID,我們能夠在APP內任何地方操作TextView。現在你可以切換到MainActivity.java文件添加一些代碼來載入icon font了。在 MainActivity內有一個方法名為onCreate的方法。載入和應用icon fonts都在此方法內,如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");

和上面的IOS例子很像,通過引用到label組件,我們告訴Android應該使用哪個自定義字體到TextView上面。之後幾行使用Unicode字元編碼,這次以JAVA方式而已。運行程序後你就可以看到你的icon在Main Activity的View上了

在應用成功後,你可以根據你的需要操作icon了。Android UI構建通常由interface
builder或組織XML文件來實現,要添加一些效果,只要回到Main Activity的XML部分找到添加了Label
ID的地方,添加一些代碼就可。例如添加以下代碼會讓你的icon變大,帶點透明的紅色,並伴有陰影。
android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />

有很多的效果可以應用。就像在IOS中一樣,動畫或者復雜的操作都由你掌控了。最大的好處是自定義的icon fonts可以廣泛的適配各類操作系統。任何支持自定義icon fonts的平台都允許你使用全新的這些效果

F. iconfont阿里巴巴矢量圖標庫怎麼用

使用方法為:

1、打開解壓的文件夾中的demo.html;

G. iconfont 阿里巴巴矢量圖標庫怎麼用

1,首先點擊右上角頭像進行賬號登錄,一般用Github登錄iconfont。

H. 怎麼使用iconfont字體

使用icon font來生成圖標抄相對於基於緝弧光襲舊叱攪癸些含氓圖片的圖標來說,有如下的好處:
1.自由的變化大小
2.自由的修改顏色
3.添加陰影效果
4.IE6也可以支持
5.支持圖片圖標的其它屬性,例如,透明度和旋轉等等

I. 如何在移動設備上應用iconfont

應用步驟
1:從iconfont平台選擇要使用到的圖標,並下載至本地;復制字體文件到項目 assets 目錄;
2:打開從iconfont平台下載下來的文件,並在目錄中打開demo.html,找到圖標相對應的 HTML 實體字元碼;
3:打開 res/values/strings.xml,添加 string 值;<string name="icons">㘅 㖭 㖮 㖯</string>
4:打開 activity_main.xml,添加 string 值到 TextView:
<TextView
android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/icons" />
5:為 TextView 指定文字:
import android.graphics.Typeface;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
TextView textview = (TextView)findViewById(R.id.like);
textview.setTypeface(iconfont);

J. iconfont怎麼在本地使用

nFont使用復
1、首先登錄網站,搜索你要用的制Icon,把它們加入購物車(點擊就可以)。
2、把購物車里的所有Icon存儲在同一個項目中。
3、進入項目,選擇「下載至本地」。
4、打開下載的文件,裡面有一個*.ttf文件,我們需要的所有字體就都在這里了。
5、把*.ttf文件放入項目,當使用時,把TextView(Android)或UILabel(IOS)的Font設置為載入*.ttf生成的自定義字體。這里有個問題,怎麼指明我們要顯示哪一個Icon呢?
6、下載一個字體編輯軟體,我在Mac上面使用的是FontLab Studio,打開*.

熱點內容
線切割怎麼導圖 發布:2021-03-15 14:26:06 瀏覽:709
1台皮秒機器多少錢 發布:2021-03-15 14:25:49 瀏覽:623
焊接法蘭如何根據口徑配螺栓 發布:2021-03-15 14:24:39 瀏覽:883
印章雕刻機小型多少錢 發布:2021-03-15 14:22:33 瀏覽:395
切割機三五零木工貝片多少錢 發布:2021-03-15 14:22:30 瀏覽:432
加工盜磚片什麼櫸好 發布:2021-03-15 14:16:57 瀏覽:320
北洋機器局製造的銀元什麼樣 發布:2021-03-15 14:16:52 瀏覽:662
未來小七機器人怎麼更新 發布:2021-03-15 14:16:33 瀏覽:622
rexroth加工中心亂刀怎麼自動調整 發布:2021-03-15 14:15:05 瀏覽:450
機械鍵盤的鍵帽怎麼選 發布:2021-03-15 14:15:02 瀏覽:506