WPF 使用.ttf文件中的图标失败

   本章讲述问题：WPF 使用.ttf文件中的图标失败，变成白框问题。

    在WPF开发过程中，我们需要使用.ttf文件中的图标和文字，但是经常会遇到类似问题：WPF 在XMAL里增加图标字体时没办法实时显示出来只显示一个小方框，影响我们观察实际效果，但运行后界面显示却是正常的。

我们先看一下效果图

 非正常的界面如下：

显示正常的界面如下：

**************************************************************************************************************

本示例中，WPF查看和使用.ttf文件中的字体和图标步骤如下：

一、在项目中添加字体图标文件的使用，层次结构如下图

二、设置.ttf文件属性，生成操作设置为资源（Resource）类型

三：在项目App.xaml中，添加字体文件的引用，代码如下：

<Application.Resources>
	<FontFamily x:Key="iconfont">Resources/Fonts/#iconfontFontFamily>
	<FontFamily x:Key="bl">Resources/Fonts/#Bahnschrift LightFontFamily>
Application.Resources>

四：使用文件字体样式引用示例：

<Style TargetType="Button" x:Key="MenuButtonStyle">
	<Setter Property="VerticalAlignment" Value="Bottom"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="Button">
				<Grid Background="Transparent">
					<Grid.RowDefinitions>
						<RowDefinition/>
						<RowDefinition Height="22"/>
					Grid.RowDefinitions>
					<TextBlock Text="{TemplateBinding Tag}"
							   VerticalAlignment="Center" HorizontalAlignment="Center"
							   FontFamily="{StaticResource iconfont}" FontSize="26"
							   Margin="0,5" Foreground="#4F4644"/>
					<TextBlock Text="{TemplateBinding Content}" 
							   Grid.Row="1" HorizontalAlignment="Center" FontSize="11"
							   Foreground="#664F4644"/>
				Grid>
			ControlTemplate>
		Setter.Value>
	Setter>
Style>
 
<Button Content="首页" Grid.Column="1" Style="{StaticResource MenuButtonStyle}"
		Tag="" CommandParameter="FirstView">
Button>

代码编写完后，发现图标显示不出来但是运行时，显示正常。 

**************************************************************************************************************

我们从一下两个方面排查：

（1）引用图标的路径对不对。如果路径不对，你程序运行的时候，也不会显示图标。

（2）创建的项目中有没有中文字，或者标识符。

（3）引用资源的类型不正确。

排查上述三点都是符合的，这就不经思考起来，难道引用的路径还是存在问题？

于是乎，就修改了一下资源的引用声明

 专门使用Pack Uri：

<Application.Resources>
	<FontFamily x:Key="iconfont">pack://application:,,,/WPFControlStyle;component/Resources/Fonts/#iconfontFontFamily>
	<FontFamily x:Key="bl">pack://application:,,,/WPFControlStyle;component/Resources/Fonts/#Bahnschrift LightFontFamily>
Application.Resources>

或

<Application.Resources>
	<FontFamily x:Key="iconfont">/WPFControlStyle;component/Resources/Fonts/#iconfontFontFamily>
	<FontFamily x:Key="bl">/WPFControlStyle;component/Resources/Fonts/#Bahnschrift LightFontFamily>
Application.Resources>

或 使用相对路径，前导有“/”
在其他情况下，文件未声明为内容类型(例如，必须作为资源嵌入到程序集中的图像，或者必须从网络加载的文件)涉及语法变化，这里是资源类型，使用“Resources/Fonts/#iconfont”是不合适的，故在xaml设计界面上不显示图标。

<Application.Resources>
	<FontFamily x:Key="iconfont">/Resources/Fonts/#iconfontFontFamily>
	<FontFamily x:Key="bl">/Resources/Fonts/#Bahnschrift LightFontFamily>
Application.Resources>

修改之后，在xaml设计界面图标显示就正常了。

在此做个笔记，以防后面遇到同样的问题，一时想不到原因和解决方法。

**************************************************************************************************************