之前再寫代碼的時候如果遇到了圖示,我都喜歡再資源檔案下建立JPG或者PNG來作為圖檔。
但是随着TTF字型圖示的普及,圖示類型的的圖檔越來越多的被放入到TTF中。
這篇也主要是寫再WPF下如何使用TTF字型。
一、下載下傳自定義圖示的TTF檔案。
我們将在阿裡圖庫挑選圖示然後下載下傳TTF檔案。
百度搜尋阿裡圖庫或者iconfont,進入後搜尋自己需要用到的圖示。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLzYzNzcDO0EzMx0SM3cDOwIjMzITMzEDMxIDMy0yM5EDOxIjMvwVMwEjMwIzLcNTOxgTMyIzLcd2bsJ2Lc12bj5ycn9Gbi52YuAjMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
選中滿意的圖示後滑鼠移動到圖示上點選添加入庫,直到選完你需要用到的圖示。
。
選取圖示完畢後點選右上角來檢視你添加到庫中的圖示檔案。
在确認添加到庫的圖示是你需要的圖示後,點選下載下傳代碼。如果需要登入,則登入一下你的賬号。
下載下傳完畢後解壓出來的内容就包含了我們需要用到的TTF檔案和TTF檔案對應的編碼。編碼包含在解壓後檔案的demo_index.html中。
二、在項目中引用TTF圖示
我們建立一個WPF程式,同時添加下載下傳的TTF檔案到項目中。
我們編寫一個自定義的右上角菜單來示範如何使用TTF圖示。
首先來取消窗體預設菜單欄。設定Window 屬性
WindowStyle="None" AllowsTransparency="True"
同時添加按鈕預設樣式資源。
我們預設所有的Button不指定樣式時都預設繼承該樣式。記得設定FontFamily為字型TTF的名稱。
我們建立一個2行的Grid。第一行預設為菜單欄,我們在在菜單欄中建立3個Button按鈕,然後指定Button的顯示文本為TTF圖示。
我們打開剛才下載下傳的字型庫,打開裡面的demo_index.html頁面。
在Button中設定Content屬性為對應的編碼串。
這樣。就可以正常使用TTF字型圖示庫拉。下圖為TTF圖示樣式和全部代碼。