WPF之iconfont（字体图标）使用

lingxiao16888

已于 2024-11-06 11:02:39 修改

阅读量1.1k

点赞数 10

分类专栏： WPF 文章标签： wpf

于 2024-11-06 11:01:29 首次发布

本文链接：https://blog.youkuaiyun.com/lingxiao16888/article/details/143501716

版权

WPF 专栏收录该内容

16 篇文章

订阅专栏

1，前文：

WPF的Xaml是与前端的Html有着高度相似性的标记语言，所以Xaml也可同Html一般轻松使用阿里提供的海量字体图标，从而有效的减少开发工作度。

2，下载字体图标：

登录阿里图标库网iconfont-阿里巴巴矢量图标库，免费添加下载图标资源文件。

搜索需要的图标

将需要的图标添加到购物车

点击购物车，进入购物车

选择项目下载，并选择下载至本地。

解压下载的压缩包有如下文件

Index.html文件

3，WPF添加字体资源。

1，添加字体文件。

2，双击打开iconfont.ttf文件，查看字体名。

3，添加资源。

嵌入字体：
1， 字体文件为.ttf。
2，将字体文件放置于解决方案中设置该文件生成操作为：Resource。

<Application x:Class="Demo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Demo"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--文件位置+#（数字记号）+字体名称，例如font/#STCaiyun"中/font/为ttf文件位置,#STCaiyun为数字记号(#)+实际字体家族名-->
        <FontFamily x:Key="myFont">pack://application:,,,/Demo;component/font/#iconfont</FontFamily>  
    </Application.Resources>
</Application>

4，使用示例。

<Window x:Class="Demo.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Demo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <UniformGrid Columns="4" Rows="4" >
        <UniformGrid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontFamily" Value="{StaticResource myFont}"></Setter>
                <Setter Property="FontSize" Value="40"></Setter>
                <Setter Property="TextAlignment"  Value="Center"/>
            </Style>
        </UniformGrid.Resources>
        <TextBlock Text="&#xe717;"></TextBlock>
        <TextBlock FontFamily="{StaticResource myFont}">&#xe66b;</TextBlock>
        <TextBlock Foreground="Teal" LineHeight="50">
            <Run >&#xe633;</Run>
            <LineBreak ></LineBreak>        
           <Span FontSize="16"  TextDecorations="Underline" >MobilePhone</Span>
        </TextBlock>
        <TextBlock></TextBlock>
    </UniformGrid>
</Window>