WPF使用ttf图标字体

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码位，这个是用来标识当前这个字体的，后面也需要用这个来显示我们的字体。

扫描二维码关注公众号，回复： 16259693 查看本文章

3.1 Windows10中的应用方式

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

其中Text就是由描述中的Unicode码位来构成的，不过需要在文本前加上 &#x ，文本后加上分号 ;

3.2 引用字体文件的方式

但是这种方式只支持Window10系统，如果在其他系统上，就会无法显示，所以我们下载Segoe MDL2 Assets图标字体，将下载的压缩包中的SegMDL2.ttf拷贝到我们的项目，为了方便管理，放到了项目中新建的Fonts文件夹下：

然后选中SegMDL2.ttf在下方的属性栏中将生成操作改为资源，这样这个文件就会以资源的形式包含在我们的WPF程序中：

使用图标字体的方式跟上面是一样的，但是因为是通过外置字体的形式来添加到WPF程序中的，所以FontFamily设置的属性值就有点讲究了，大概可以表述为pack://application:,,,/项目名称空间;component/字体路径/字体文件名#字体实际名称，下面来一个一个介绍（后面引用自定义资源文件也可以参考此规则，不过#字体名称就不需要了，具体看下方）：

项目名称空间： 如果没有私自改过项目名称空间，那么你的项目名称空间就是项目的名称，我这里的项目名称叫FontWindow,所以项目名称空间也是如此，如果不清楚你的项目名称空间是什么，可以打开你的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:,,,/FontWindow;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets"
            FontSize="50"
            Foreground="Red"
            Text="&#xE702;" />

​ PS： 为了不让每次用都写这么长的FontFamily，可以考虑在资源中写好再引用，或者定义一个TextBlock图标字体样式（再扯点），已经了解资源定义的下面可以略过。

3.3 自定义资源

新建文件夹Styles，在该文件夹下新建资源文件IconFonts（右键Styles，选择添加资源字典）。两种方式都写在IconFonts这个文件中了

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <FontFamily x:Key="SegIconFont">
        pack://application:,,,/FontWindow;component/Fonts/SegMDL2.ttf#Segoe MDL2 Assets
    </FontFamily>

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

此时只是添加了一个名叫IconFonts资源字典，还需要引入到项目中，才能在界面中使用，所以需要在App.xaml文件中添加一条引用语句，即告知程序需要将新建的这个资源字典包含进来，语句为<ResourceDictionary Source="pack://application:,,,/FontWindow;component/Styles/IconFonts.xaml" />，名称空间和资源路径规则上面已表述，添加一个App.xaml：

<Window
    x:Class="FontWindow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:FontWindow"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <!--  win10系统直接使用  -->
            <TextBlock
                FontFamily="Segoe MDL2 Assets"
                FontSize="180"
                Foreground="Blue"
                Text="&#xE702;" />

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

            <!--  定义FontFamily资源  -->
            <TextBlock
                FontFamily="{StaticResource SegIconFont}"
                FontSize="180"
                Foreground="Black"
                Text="&#xE702;" />

            <!--  定义TextBlock Style样式  -->
            <TextBlock
                FontSize="180"
                Foreground="GreenYellow"
                Style="{ 
         StaticResource tbSegIconFontKey}"
                Text="&#xE702;" />
        </StackPanel>
    </Grid>
</Window>

效果图

3.4 C#代码中使用

TextBlock textBlock = new TextBlock();
textBlock.FontFamily = new FontFamily(new Uri("pack://application:,,,/Fonts/iconfont.ttf"), "#iconfont");
textBlock.Text = "\ue670";

注意事项

在xmal代码里面 图标内容部分写text = ""

而在C#代码里面写text = "\ue670"

到此完结，希望逻辑是清晰的，感谢你的观看！

参考链接：https://www.cnblogs.com/choumengqizhigou/p/15550133.html

回到顶部

---