1

我想在我的 Windows Store App 的 WebView 中使用一种字体。

我指的是这个页面。 http://blogs.msdn.com/b/wsdevsol/archive/2012/10/23/about-webview-and-embedded-fonts.aspx

此页面使用 WebView 的 Navigate 方法。但我想使用 NavigateToString 方法。将使用该字体的 HTML 字符串传递给 NavigateToString 方法，并希望显示该 HTML。以下示例 1 失败。

示例 1：

    private async void Button_Click_1(object sender, RoutedEventArgs e)
    {
        MyWebView.NavigateToString("<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta charset=\"utf-8\" /><style type=\"text/css\">  @font-face { font-family: \"ipafont\"; font-style: normal; font-weight: 400; src: url(ipaexm.woff);} .ipa { font-family: \"ipafont\"; font-size: xx-large; }</style></head><body><div class=\"ipa\">Hello, Good morning.</div></body></html>");
    }

我试过改变

src：网址（ipaexm.woff）；

至

src: url("ms-appx-web:///ipaexm.woff");

但我失败了。当然，我在 Windows Store 应用程序的根文件夹中包含了“ipaexm.woff”字体。

以下示例 2 成功。

示例 2：

    private async void Button_Click_1(object sender, RoutedEventArgs e)
    {
       string style = "@font-face { font-family: 'ipa';  src: url(data:application/x-font-woff;charset=utf-8;base64," + <BASE 64 ENCODED TEXT OF FONT GOES HERE)> + ") format('woff'), url('ipa__-webfont.ttf') format('truetype'); font-style: normal; font-weight: 400; }";

        MyWebView.NavigateToString("<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta charset=\"utf-8\" /><style type=\"text/css\">  @font-face { font-family: 'ipafont'; src: url('ipa__-webfont.eot'); } " +  style + " .ipa { font-family: \"ipafont\"; font-size: xx-large; }</style></head><body><div class=\"ipa\">Hello, Good morning.</div></body></html>");

    }

我想使用一种示例1。我使用的字体约为 5MB，因此字体的 base 64 编码文本太长。有什么好的方法可以通过 NavigateToString 方法使用字体吗？

4

1 回答 1

2

我自己也问了同样的问题，终于找到了答案。

如果您使用该Source属性将 HTML 放入 WebView，则有几种解决方案可以工作，但如果您使用的是这些解决方案，这些都不起作用NavigateToString

除了这个。

将此代码放入 HTML 文件的头部。如果在 css 文件中，这将不起作用。

@font-face {
    font-family: 'FontAwesome';
    src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64 STRING OF fontawesome-webfont.woff>) format('woff'), 
        url('ms-appx-web:///fontawesome-webfont.ttf?v=4.2.0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

您可以使用此页面来转换您的 woff 文件。如果该链接不起作用，那么还有很多其他页面可以这样做。

于 2014-10-24T14:12:29.827 回答