天天看點

WPF程式設計,使用字型圖示的一種方法。二、Font Awesome字型檔案

一、阿裡檔案圖示

  •  目前在阿裡的網站上下載下傳的字型檔案自帶有Unicode編碼,可以直接在網頁上檢視。
  • Font Awesome網站下載下傳的字型檔案也帶有編碼http://www.bootcss.com/p/font-awesome/
  •  ttf檔案名稱不重要,可以任意修改。#iconfont是字型名稱,阿裡巴巴的矢量圖示預設字型名稱為iconfont。
  •  一起下載下傳的壓縮包中有圖示對應的Unicode編碼,
  • 和字型檔案的名字無關,和檔案内部的字型族屬性值有關,翻到最下面,利用其它軟體可檢視字型檔案的字型族。
  • 可以利用那個軟體進行修改,重新生成字型檔案。然後加入到項目中,重新開機VS軟體。

1、增加檔案夾,放入ttf字型檔案,資源裡定義引用

<Window.Resources>
        <--第一種定義-->
        <Style x:Key="FIcon"
               TargetType="TextBlock">
            <Setter Property="FontFamily"
                    Value="/font/#iconfont"></Setter>
            <Setter Property="TextAlignment"
                    Value="Center" />           
            <Setter Property="FontSize"
                    Value="20" />
        </Style>

        <--第二種定義-->
        <Style x:Key="Fonticon">
            <Setter Property="TextElement.FontFamily"
                    Value="/font/#iconfont" />
        </Style>
    </Window.Resources>
           

2、XAML中使用

其中:&#x   是固定的

<TextBlock Text="&#xe612;"
                       Style="{DynamicResource FIcon}"
                       FontSize="80"
                       Margin="3"></TextBlock>
           

 3、字型圖示的名字

Text的值可以參考3.2中的demo.html,它是字元的Unicode編碼。

WPF程式設計,使用字型圖示的一種方法。二、Font Awesome字型檔案

4、背景C#代碼設定圖示

将&#x換成\u

ttttt.Text = "\ue613";
           

解釋:

由于XAML是XML的一個擴充,是以XAML中用unicode碼來表示字元的方式與XML相同。

格式為&#x****;

前三位固定為&#x,後面四位代表Unicode碼值,分号不能省略。

例如:<TextBlockContent="&#x2191" /> 

https://www.cnblogs.com/anding/p/4961215.html

二、Font Awesome字型檔案

http://fontawesome.dashgame.com/#basic

1、下載下傳字型檔案ttf

2、加入到項目中

3、定義資源,注意字型名字那一塊,必須是這個名字FontAwesome

<Style x:Key="FIcon"
                   TargetType="TextBlock">
                <Setter Property="FontFamily"
                    Value="/fontfile/#FontAwesome"></Setter>
                <Setter Property="TextAlignment"
                        Value="Center" />
                <Setter Property="FontSize"
                        Value="20" />
            </Style>
           

4、借助FontCreator軟體看檢視對應的字型名字和每個圖示對應的編碼,

WPF程式設計,使用字型圖示的一種方法。二、Font Awesome字型檔案
WPF程式設計,使用字型圖示的一種方法。二、Font Awesome字型檔案
WPF程式設計,使用字型圖示的一種方法。二、Font Awesome字型檔案

5、使用方法同阿裡的字型

<TextBlock Text="&#xF110;"
                       Style="{DynamicResource FIcon}"
                       FontSize="80"
                       Margin="3"></TextBlock>
           

三、電子表的字型風格longzhoufeng

WPF程式設計,使用字型圖示的一種方法。二、Font Awesome字型檔案

這種電子表的字型風格--這種樣式叫 :longzhoufeng 字型

下載下傳位址:https://www.fontke.com/font/23256500/

1、下載下傳字型檔案

2、加入到項目中

3、前台資源定義

<Style x:Key="FIcon3"
               TargetType="TextBlock">
            <Setter Property="FontFamily"
                    Value="/fontfile/#longzhoufeng"></Setter>
            <Setter Property="TextAlignment"
                    Value="Center" />
            <Setter Property="FontSize"
                    Value="20" />
        </Style>
           

4、XAML

<TextBlock Text="123456789"
                       Style="{DynamicResource FIcon3}"
                       FontSize="80"
                       Foreground="YellowGreen"
                       Margin="3"></TextBlock>
           

四、同理WPF中調用其它第三方字型與第三種方式一樣。

繼續閱讀