fonts - Xamarin Forms 自定义字体 CrossPlatform

Question

我正在关注 Fonts Tutorial由 提议Xamarin 在每个平台上都有一个自定义下载的字体。然而，我遇到了很多问题，我也尝试找到一种方法来做一些事情，但没有找到如何让它发挥作用。

首先，看一下教程并从相关部分开始。 Using a Custom Font

iOS:

它说我们必须添加 字体.tff 进入资源文件夹。
然后，我们必须对 Info.plist 做一些事情，但是什么？我不确定我必须做什么。

安卓:

适用于 Android 的 Xamarin.Forms 当前不公开将字体设置为自定义字体文件的功能，因此需要自定义呈现器。

CustomLabelRenderer.cs

public class CustomLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        System.Diagnostics.Debug.WriteLine(Forms.Context.ApplicationContext.Assets, e.NewElement.StyleId + ".ttf");

        if (!string.IsNullOrEmpty(e.NewElement?.StyleId))
        {
            var font = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, e.NewElement.StyleId + ".ttf");
            Control.Typeface = font;
        }
    }
}

根据文档， OnElementChanged()会被调用，但是，它不会。 Debug.WriteLine() 不显示任何内容。 为什么？

WinPhone 8.1:

我们必须将字体文件添加到 /Assets/Fonts/应用程序项目中的文件夹并设置构建操作:内容。一旦实现，适用于 Windows Phone 的 Xamarin.Forms 可以通过遵循特定的命名标准引用已添加到项目中的自定义字体。 但是，字体没有出现在 View 上，字体保持标准，为什么？

目前，经过大量搜索，大量尝试......什么都没有......

我正在尝试添加 DIN Condensed Bold 字体

我的 XAML 布局:

<ContentPage.Content>
 <AbsoluteLayout BackgroundColor="#235A5E">
  <!-- Menu -->
  <AbsoluteLayout x:Name="Menu" BackgroundColor="#2F767B"
                  AbsoluteLayout.LayoutBounds="0,0,1,0.1"
                  AbsoluteLayout.LayoutFlags="All">
    <Label x:Name="label" Text="Connection" TextColor="White" FontSize="30" VerticalOptions="Center" HorizontalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.5, 0, 0.8, 1"
           AbsoluteLayout.LayoutFlags="All"/>
    <Button x:Name="ConnectionButton" BackgroundColor="Transparent" BorderColor="Transparent"
           AbsoluteLayout.LayoutBounds="1, 0.5, 0.2, 1"
           AbsoluteLayout.LayoutFlags="All"/>
  </AbsoluteLayout>
 </AbsoluteLayout>
</ContentPage.Content>

所以Label的FontFamily属性可以这样设置
<Label Text="Hello World !" FontFamily="DIN Condensed Bold"
但是，正如教程中所说，对于 WinPhone 示例，它必须通过另一种方式完成，所以我尝试通过 C# 部分更改 FontFamily。

public partial class MyPage : ContentPage
{
    public string FontFamily { get; set; }

    public MyPage()
    {
        InitializeComponent();

        label.FontFamily = Device.OnPlatform(
            iOS: "DIN Condensed Bold",
            Android: "DIN Condensed Bold",
            WinPhone: @"Assets\Fonts\DINCondensedBold.ttf#DIN Condensed Bold"
        );
    }
}

这也不起作用!我还看到了有关 XAML 部分的一些有趣的东西。我想要(f FontFamily 有一天会工作..)有一个 defintion我们让我能够只编辑一个字段字符串来设置我页面的所有 Label 的 FontFamily。

<ContentPage.Resources>
  <ResourceDictionary>

  </ResourceDictionary>
</ContentPage.Resources>

我看到我也许可以为 MyPage.xaml 的所有 Label 定义一个 FontFamily，它是如何工作的？

我也是 MVVM 的新手，但我尝试绑定(bind)我的 public string FontFamily { get; set; }到 xaml <Label Text="Hello World !" FontFamily="{Binding FontFamily}"/> 中定义的标签但又一次，没有成功..

我完全被困住了......谁能帮助制作教程或解释我在教程后提到的每件事。感谢您的帮助!

Answer 1

我认为在某些时候，Xamarin Forms 方法比需要自定义渲染器(或效果等)更容易。首先是官方指导:https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/fonts/#Using_a_Custom_Font .

对我来说，适用于 iOS、Android 和 UWP 的工作解决方案最终是这样的:

    <Label Text="The sly fox jumps over the lazy brown dog.">
        <Label.FontFamily>
            <OnPlatform x:TypeArguments="x:String">
                <On Platform="iOS" Value="OpenSans-Semibold"/>
                <On Platform="Android" Value="Fonts/OpenSans-Semibold.ttf#OpenSans-Semibold"/>
                <On Platform="UWP" Value="Assets\Fonts\OpenSans-Semibold.ttf#Open Sans"/>
            </OnPlatform>
        </Label.FontFamily>
    </Label>

对于所有三个平台，此示例中的字体文件都存储在 Fonts 子文件夹中。您会在上面的 Android 和 UWP (WinPhone) 路径中看到这一点。在 iOS 中，plist 条目保存自定义字体的路径信息。

最困难的部分是弄清楚字体名称/首选字体。请注意 Android 和 UWP/WinPhone 的“#”之后的差异。反复试验(Android)的结合，感谢本文帮助指出所需的特异性: http://www.blendrocks.com/code-blend/2015/01/04/a-complete-guide-to-working-with-custom-fonts-in-your-windows-and-windows-phone-app .

那篇文章最相关的部分是首选字体名称的挑剔和不明显。 Windows 字体查看器(以及 Mac Font Book，顺便说一句，afaik)不会向您显示首选的姓氏。来自文章:

This part "#Helvetica Neue LT Std" is a suffix containing the Preferred Family. It's required in order for the custom font to work. The suffix has to be absolutely correct and it's case sensitive.

• The easiest way to find it is to use a tool called dp4 font viewer. It's free and can be found downloaded here. Find your font through the program, go to the info tap copy the Preferred Family.
• Do NOT use Windows built in font viewer as it does NOT show the correct preferred font family.

编辑:将 OnPlatform 片段更新为当前推荐的语法。

EDIT2:将 WinPhone 平台更改为 UWP 并删除了 UWP 路径的前导反斜杠 '\' - 没有意识到这不适用于 UWP/WinPhone!还修复了 dp4 字体查看器的下载链接，因为它现在需要“https”。