WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体

一、阿里巴巴图标矢量库（https://www.iconfont.cn/）

1、创建字体工程

2、往工程里添加图标

3、生成并下载字体文件

  点击上图的“下载到本地”按钮。

4、window下安装字体库并查看查看对应的unicode码

① 双击“iconfont.ttf”文件安装字体：

② 打开“控制面板\外观和个性化\字体”，点击左侧的“查找字符”按钮，然后选择对应的字体+图标进行查看：

5、本地扩展字体库-FontCreator工具

① 添加图标

  暂略

② 查看字体中图标的unicode码

  暂略

③ 保存为ttf文件

  暂略

二、WPF使用ttf矢量图标字体

1、WPF导入ttf文件

2、App.xaml中引进资源：<FontFamily x:Key="IconFont1"> Pack://application:,,,/ZhibiXiaobai;component/Resources/#iconfont </FontFamily>如下：

登录后复制

<Application x:Class="ZhibiXiaobai.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ZhibiXiaobai"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              Startup="Application_Startup">
    <Application.Resources>
        <ResourceDictionary>
            <FontFamily x:Key="IconFont1">
                Pack://application:,,,/ZhibiXiaobai;component/Resources/#iconfont
            </FontFamily>
        </ResourceDictionary>
    </Application.Resources>
</Application>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.

  注：#iconfont为字体的名字，见“一、4”图中展示的字体名称。

3、控件使用图标字体资源，格式FontFamily="{DynamicResource 资源名}" Text="&#x +unicode码;"，如下：

登录后复制

<TextBlock FontFamily="{DynamicResource IconFont1}" Text="" Foreground="Black" FontSize="15"/>

• 1.

  效果如下图：

4、后台动态生成的控件使用ttf矢量图标字体

  ① 绑定样式：textBlock1.FontFamily = new FontFamily(new Uri("Pack://application:,,,/HostControl.APP;component/Resources/"), "./#iconfont");

  ② 文本赋值：textBlock1.Text = "\xE780";

 

作者：꧁执笔小白꧂

原创作者: u_16822845 转载于: https://blog.51cto.com/u_16822845/11650953