Question

在xamarin形式的UWP项目的Webview组件中加载的html数据中加载和应用自定义字体时遇到问题。由于未加载字体，因此正确的字体未应用于html中的文本。

我正在创建一个xamarin表单应用程序，在该应用程序中，我使用Webview视图显示书中的html数据。数据是一本书中的文本，并使用Alvi Nastaleeq等自定义字体对文本进行样式设置。字体使用字体规则在IOS和Android版本中应用，但在UWP中不起作用。字体在UWP项目的Assets / Fonts文件夹中。

我尝试在UWP中使用带有正确URI方案ms-appx-web：//的font-face规则，但它不起作用。我还通过以下帖子中的建议： https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/ 也不起作用

我尝试同时加载.woff和.ttf字体，但是它不起作用。

这是我在html标头中的内容：

            // this one was a try for UWP.. not working..
        @font-face {
        font-family: 'Alvi Nastaleeq';
        src: url('ms-appx-web:///Assets/Fonts/Alvi Nastaleeq.ttf');
        } 

             // theese are for IOS and Android and works..
       @font-face { 
        font-family: Alvi Nastaleeq;
        src: url('Fonts/Alvi Nastaleeq.ttf') 
            }
        @font-face { 
        font-family: Aslam;
        src: url('Fonts/Aslam.ttf') 
            }
        @font-face { 
        font-family: Al Qalam Quran Majeed;
        src: url('Fonts/Al Qalam Quran Majeed.ttf') 
            }
        @font-face { 
        font-family: Amiri-Bold;
        src: url('Fonts/Amiri-Bold.ttf') 
            }
   </style>

我想在我的xamarin表单应用程序的UWP版本中将字体应用于加载到webview视图中的html数据。

Answer 1

这是我能够使其正常工作的唯一方法：

编码字体，可以使用Font Squirrel's Webfont Generator。选择专家... 选项，然后在 CSS选项下选中“ Base 64 Encode ”（基本64位编码）框。请注意，如果您对结果不满意（渲染效果不佳），请重试，然后在“专家”选项下，为“ Truetype提示”选择“ 保持现有”。
将@ font-face src 属性设置为以下值：

TTF字体：

url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING_HEREE) format('truetype');

OPENTYPE字体：

url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING_HERE);

WOFF字体：

url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING_HERE) format(???woff???);

如何在Xamarin表单uwp项目中的WebView中加载自定义字体

1 个答案: