如何为Windows Phone WebView控件设置自定义字体

Question

Windows Phone 10不支持WebView控件的自定义字体。Edge浏览器也不支持自定义字体。例如。缅甸字体Zawgyi。

如何在Windows Phone应用程序中设置WebView控件的自定义字体？

Answer 1

支持WebView控制中的自定义字体：

（1。）用嵌入式字体创建CSS

    body, a, p, span, div, textarea {
      font-family: MyCustomFont;
    }
    @font-face {
      font-family: MyCustomFont;
      src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAXXXXXXXXXXX......) format('woff');
      font-weight: normal;
      font-style: normal;
     } 

（2。）在WebView_navigation Completed方法

上注入jQuery and CSS

 private async void MyWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
 {
    // Inject jQuery file which located at local
    StorageFile jquery = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///JavaScripts\jquery-1.10.2.min.js"));
    string jquery_string = await FileIO.ReadTextAsync(jquery);
    await MyWebView.InvokeScriptAsync("eval", new string[] { jquery_string });

    // Inject custom font embedded CSS 
    StorageFile myfontcss = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///CSS\mycustomfont.css"));
    string myfontcss_string = await FileIO.ReadTextAsync(myfontcss);
    myfontcss_string = myfontcss_string.Replace("n", "").Replace("t", ""); //.Replace("'", "'").Replace(""", """);
    string cssRef = "$("<style id='myfont' type='text/css'>" + myfontcss_string + "</style>").appendTo('head');";
    await MyWebView.InvokeScriptAsync("eval", new string[] { cssRef });
  }