WPF使用ttf圖標字體

什么是圖標

將矢量圖形打包成字體的形式，使用方式也和我們使用字體一樣，能夠自由設置圖標的大小，圖標的顏色。相對於傳統圖片來說，優點還是很明顯的：

1. 體積小，加載速度快，性能高
2. 矢量（自由縮放，不會失真）
3. 靈活性（可通過代碼更改圖標顏色）

正是因為它和字體一樣，也存在一些弊端：

1. 難以兼容以前的設計，替換工作量大
2. 很難貼合設計師的設計稿，協調溝通成本略高

常用的圖標字體

首先推薦的是阿里巴巴矢量圖標庫，這個里面方案比較多，也有很多成套的圖標，可以多嘗試嘗試，之前只需要登錄就行了，現在好像還要驗證手機號，有點惡心。

其次就是Font Awesome 圖標，這里分為舊版和新版（V5版本 or Pro版本），舊版是免費，圖標較少。

微軟目前提供了兩套，一套是Windows10的Segoe MDL2 Assets 圖標 ，一套是windows11的Segoe Fluent 圖標。

Google有一套開源的Material Design icons的圖標字體，之前是提供下載到本地的，沒找到了Material Design icons by Google。

剩下的就不說了，圖標字體比較多，自己去搜一搜吧！

如何在WPF中使用圖標字體

本例子中使用的是微軟的 Segoe MDL2 Assets 圖標，下圖是網站中圖標字體的部分展示，其中可以看到一個Unicode碼位，這個是用來標識當前這個字體的，后面也需要用這個來顯示我們的字體。

Windows10中的應用方式

這套圖標字體在Windows10中是自帶的，所以可以直接設置FontFamily屬性為Segoe MDL2 Assets，來獲得圖標的支持：

<TextBlock
            FontFamily="Segoe MDL2 Assets"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

其中Text就是由描述中的Unicode碼位來構成的，不過需要在文本前加上&#x，文本后加上分號;,完整的就是”“。

引用字體文件的方式

但是這種方式只支持Window10系統，如果在其他系統上，就會無法顯示，所以我們下載Segoe MDL2 Assets圖標字體，將下載的壓縮包中的SegMDL2.ttf拷貝到我們的項目，為了方便管理，放到了項目中新建的Fonts文件夾下：

然后選中SegMDL2.ttf在下方的屬性欄中將生成操作改為資源，這樣這個文件就會以資源的形式包含在我們的WPF程序中：

使用圖標字體的方式跟上面是一樣的，但是因為是通過外置字體的形式來添加到WPF程序中的，所以FontFamily設置的屬性值就有點講究了，大概可以表述為pack://application:,,,/項目名稱空間;component/字體路徑/字體文件名#字體實際名稱，下面來一個一個介紹（后面引用自定義資源文件也可以參考此規則，不過#字體名稱就不需要了，具體看下方）：

項目名稱空間：如果沒有私自改過項目名稱空間，那么你的項目名稱空間就是項目的名稱，我這里的項目名稱叫WPF_Blog_Test,所以項目名稱空間也是如此，如果不清楚你的項目名稱空間是什么，可以打開你的XAML文件，比如項目中的App.xaml，可以看到xaml文件中的x:Class屬性，或者后台類的namespace：

字體路徑/文件名：字體文件這里是放在Fonts文件夾下的，所以我的字體路徑和文件名為Fonts/SegMDL2.ttf,文件名這里有個小插曲，應使用屬性中顯示的文件名：

字體實際名稱：字體的實際名稱需要我們雙擊打開字體，然后才能看到（別再VS中打開，不然看到的是字節碼，在windows的文件夾中選中文件雙擊打開），這里SegMDL2.ttf的實際名稱是Segoe MDL2 Assets：

所以FontFamily應該設置為”pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets“，貼個代碼，收工！

<TextBlock
            FontFamily="pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

​ PS：為了不讓每次用都寫這么長的FontFamily，可以考慮在資源中寫好再引用，或者定義一個TextBlock圖標字體樣式（再扯點），已經了解資源定義的下面可以略過。

自定義資源

新建文件夾Styles，在該文件夾下新建資源文件IconFonts（右鍵Styles，選擇添加資源字典）。兩種方式都寫在IconFonts這個文件中了，方便演示就少搞點：

寫上我們的定義的樣式（代碼在圖片下方）：

    <FontFamily x:Key="SegIconFont">
        pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets
    </FontFamily>

    <Style
        x:Key="tbSegIconFontKey"
        TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets" />
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontSize" Value="50" />
    </Style>

此時只是添加了一個名叫IconFonts資源字典，還需要引入到項目中，才能在界面中使用，所以需要在App.xaml文件中添加一條引用語句，即告知程序需要將新建的這個資源字典包含進來，語句為<ResourceDictionary Source="pack://application:,,,/WPF_Blog_Test;component/Styles/IconFonts.xaml" />，名稱空間和資源路徑規則上面已表述，添加一個App.xaml的截圖：

剩下的就是在程序中使用了，直接上代碼

        <!--  最原始方式  -->
        <TextBlock
            FontFamily="pack://application:,,,/WPF_Blog_Test;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

        <!--  定義FontFamily資源  -->
        <TextBlock
            FontFamily="{StaticResource SegIconFont}"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

        <!--  定義TextBlock Style樣式  -->
        <TextBlock
            FontSize="50"
            Foreground="Red"
            Style="{StaticResource tbSegIconFontKey}"
            Text="&#xE702;" />

沒想到截了這么多圖，希望邏輯是清晰的，感謝你的觀看！