avatar

目錄
WPF学习笔记(四)字体图标的使用

WPF中字体图标的使用

一、前言

目前,前端开发,比如Android、Web等,对于图标字体运用是越来越广泛。本人目前因某些原因(生活所迫…😔),不得不自学WPF,在这期间用到了这些知识,所以本文就WPF中字体图标的使用进行阐述。

二、图标字体

2.1 图标字体的优劣势

  • 优势

    1. 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,不需要下载一个个图像。这样可以减少HTTP的请求数量,而且和HTML5的离线存储配合,可以对性能做出优化。

    2. 灵活性:不调字体可以像页面中的文字一样,通过font-size属性来对其进行大小的设置,而且还可以添加各种文字效果,如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话!

    3. 兼容性:图标字体支持现代浏览器,甚至是低版本的IE浏览器,所以可以放心的使用它。

    4. 相比于位图放大图片会出现失真、缩小又会浪费掉像素点,图标字体不会出现这种情况。

  • 劣势

    1. 图标字体只能被渲染成单色,或者是CSS3的渐变色
    2. 版权上也有着对应的限制,当然还是有很多免费的图标字体可以供我们下载。
    3. 当自己创作图标字体的时候,是比较耗费时间的,重构人员的后期维护成本也比较高

    字体图标其实就是将矢量图打包到字体文件中,就像使用一般外置字体一样来使用,因此在WinForm、WPF中也是可以使用的。所以,开干…

三、WPF中使用字体图标

开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,像Font AwesomeIconfontMaterial Design等….

3.1 如何使用

  1. 创建字体资源项目

  2. 将字体文件加入到项目资源

    下载所需要的字体文件(后缀为.tff的文件),添加到项目中,并设置生成操作为”Resource”,如下图:

3.2 使用方式

  1. 定义样式

    使用TextBlock作为图标显示的容器,因此定义一个TextBlock的样式即可,其中iconfont为字体名称,可在创建字体图标项目时修改

    Code
    1
    2
    3
    4
    5
    6
    7
    8
    <!--Ficon-->
    <Style x:Key="Ficon" TargetType="{x:Type TextBlock}">
    <Setter Property="FontFamily" Value="Resources/Fonts/#iconfont"/>
    <Setter Property="FontSize" Value="26"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    </Style>
  1. XAML中使用

    直接在TextBlock 中使用即可:

    Code
    1
    2
    3
    4
    5
    6
    7
    <StackPanel Orientation="Horizontal">
    <TextBlock Text="&#xe624;" FontSize="50" FontFamily="Resources/Fonts/#iconfont" Margin="50 0 0 0" VerticalAlignment="Center" Foreground="Red" />

    <TextBlock Text="&#xe6e1;" FontSize="50" FontFamily="Resources/Fonts/#iconfont" Margin="50 0 0 0" VerticalAlignment="Center" Foreground="Black"/>

    <TextBlock Text="&#xe623;" FontSize="40" FontFamily="Resources/Fonts/#iconfont" Margin="50 0 0 0" VerticalAlignment="Center" Foreground="Green"/>
    </StackPanel>

    效果如下:

  1. C#代码使用示例

    c#
    1
    2
    3
    //代码设置字体图标
    this .ticon1.Text = "&#xe624;" ;
    this .ticon2.Text = "&#xe624;" ;

四、如何下载字体文件

以Iconfont来举例说明

4.1关于Iconfont

IconFont-阿里巴巴体验团队倾力打造,功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

官网链接:https://www.iconfont.cn/

4.2 基本操作

  1. 登录Iconfont官网:https://www.iconfont.cn/
  2. 新建项目,将自己所需的icon添加到项目
  3. 然后下载到本地
  4. 将后缀为.tff的文件引入WPF项目

五、总结…

前端路茫茫,我还是好好学习吧…😭

本站点所有内容仅记录自己一路走来的学习历程,如有错误,请多指正…😊

【参考链接】

文章作者: Dylan
文章鏈接: https://www.faithlch.com/WPF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0(%E5%9B%9B)%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%BD%BF%E7%94%A8.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論