0

我在 ContentPage 中使用 FontAwesome，在 Android 和 UWP 中没有任何问题。（Android 使用标签渲染类）。但是，当我用 ContnetPage 替换 NavigationPage 时，UWP 字体图标消失并显示一个正方形！Android 在 NavigationPage 上运行良好。UWP 需要像 Android 一样渲染吗？

public class FontAwesomeIcon : Label
    {
        public const string Typeface = "FontAwesome";
        public FontAwesomeIcon(string fontAwesomeIcon = null)
        {
            switch (Device.RuntimePlatform)
            {
                case Device.Windows :
                {
                    FontFamily= "Assets/Fonts/FontAwesome.ttf#FontAwesome";
                    break;
                }
                case Device.Android :
                {
                    FontFamily = Typeface;
                    break;
                }
                case Device.iOS:
                {
                    FontFamily = Typeface;
                    break;
                }
            }
            Text = fontAwesomeIcon;
            VerticalOptions = LayoutOptions.Center;
        }

        /// <summary>
        /// Get more icons from http://fortawesome.github.io/Font-Awesome/cheatsheet/
        /// Tip: Just copy and past the icon picture here to get the icon
        /// </summary>
        public static class Icon
        {
            public static string AngleRight = "\uf105";
            public static string User = "\uf007";
            public static string Lock = "\uf023";
        }
    }

更新 ：

答案是我们必须使用这个FontFamily=@"/Assets/Fonts/FontAwesome.ttf#FontAwesome"

4

1 回答 1

1

但是，当我用 ContnetPage 替换 NavigationPage 时，UWP 字体图标消失并显示一个正方形！Android 在 NavigationPage 上运行良好。UWP 需要像 Android 一样渲染吗？

在 uwp 客户端项目中使用自定义字体有两种方法。

为类创建自定义渲染器FontAwesomeIcon。然后设置FontFamily为本机控制。请参考以下代码。请注意，您需要检查FontFamily.

[assembly: ExportRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer))]

namespace FontAweSomeTest.UWP
{
    public class CustomLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            var label = Control;
            string font = "Assets/Fonts/fontawesom-webfont.ttf#FontAwesome";
            label.FontFamily = new Windows.UI.Xaml.Media.FontFamily(font);
        }
    }
}

另一种方法是您在帖子中提到的。我已经修改了你的代码。请检查。

public class FontAwesomeIcon : Label
    {
        public const string Typeface = "FontAwesome";

        public FontAwesomeIcon(string fontAwesomeIcon = null)
        {
            switch (Device.OS)
            {
                case TargetPlatform.Windows:
                    {
                        FontFamily = "Assets/Fonts/fontawesome-webfont.ttf#FontAwesome";
                        break;
                    }
                case TargetPlatform.Android:
                    {
                        FontFamily = Typeface;
                        break;
                    }
                case TargetPlatform.iOS:
                    {
                        FontFamily = Typeface;
                        break;
                    }
            }
            Text = fontAwesomeIcon;
            VerticalOptions = LayoutOptions.Center;
            HorizontalOptions = LayoutOptions.Center;
        }

        /// <summary>
        /// Get more icons from http://fortawesome.github.io/Font-Awesome/cheatsheet/
        /// Tip: Just copy and past the icon picture here to get the icon
        /// </summary>
        public static class Icon
        {
            public static string AngleRight = "\uf105";
            public static string User = "\uf007";
            public static string Lock = "\uf023";
        }
    }

我用 ContnetPage 替换 NavigationPage。它运行良好。

于 2017-04-20T07:52:28.927 回答