Question

我是Windows Phone 8应用程序的新手，我正在开发一个在Web浏览器中加载自定义字体的应用程序。在这里，我已将我的HTML保存在独立存储中，并将我的字体添加到Application的Assets文件夹中。现在我正在加载HTML，因为HTML字体设置为。

@font-face {
    font-family:'FontName';
    src: local(your_font), url('fonts/bttf.ttf') format('opentype');
}

但它没有正确显示。请帮帮我。

Answer 1

如果我们想在WebBrowser控件中使用本地自定义字体，那么事实证明它比XAML复杂得多。参考在线TTF文件工作正常，相反本地文件。

我曾经认为Windows Phone应用程序不可能在WebBrowser中使用本地自定义字体，直到我阅读此StackOverflow帖子：Getting a web-font to work on an HTML5 Windows Phone App?解决方案基于以下列出的条件是否匹配，

Windows Phone 8设备应为GDR2或更高版本
字体文件的Build Action属性必须为Content
字体文件的embeddable标志必须设置为0

还有一个很好的样本构建了一个项目。 A barebones example of using CSS3 @font-face with embedded fonts in Windows Phone 8.

解决了最困难的部分后，使用本地自定义字体浏览本地HTML变得非常容易，请参阅下面的示例：

@font-face {
font-family: 'ALGER';
src: url('ALGER.ttf') format('truetype'), url('Fonts/ALGER.ttf') format('truetype');
}
p {
font-family: 'ALGER';
font-size: 18px;
}

此类CSS适用于位于应用程序包或独立存储中的HTML和字体文件。

最后但同样重要的是，本地HTML文件必须具有HTML doctype声明，因为@ font-face仅支持CSS2或CSS3。

希望这会有所帮助。谢谢和欢呼。

Answer 2

我发现在Windows Phone上的WebBrowser控件中加载字体的唯一可靠方法是避免将它们作为文件加载。

而不是使用：

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff?v=1.1") format("woff");
}

我们使用：

@font-face {
  font-family: "MyFont";
  src:url(data:application/x-font-woff;base64,xxPUT_BASE64_WOFF_DATA_HERExx) format("woff");
}

在javascript中，我们创建一个样式标记，将CSS放入样式标记中，并将样式标记附加到头部。帮手功能（我编辑使其成为简单的JavaScript - 我认为正确）：

function insertStyle(cssText) {
    var styleElement = document.createElement('style');
    styleElement.setAttribute('type', 'text/css');
    styleElement.setAttribute('rel', 'stylesheet');
    if (styleElement.styleSheet) {   // IE11 IE docMode < 11
        styleElement.styleSheet.cssText = cssText || '';
    } else {
        styleElement.appendChild(document.createTextNode(cssText || ''));
    }
    (document.head || document.getElementsByTagName('head')[0]).appendChild(styleElement);
}

我认为这是一个讨厌的解决方法，但它可以工作（即使在GDR2中），如果你有一个好的构建管道，也很容易实现。

请注意，我们也将此用于iOS和Android（我们不支持Android 2.x）。这似乎是一个相当强大的解决方案。

与在互联网上提供的html应用程序（Ajax）一起使用时，它具有很大的优势，我们可以可靠地检测javascript文件是否已加载并正确运行，同时检测CSS文件（或字体 - 面）是否失败提取是很难干净的（跨浏览器和向后兼容）。

另请注意，我们使用woff格式来实现最大向后兼容性。你可以使用很多ttf到woff的转换器。我们不需要其他格式，因为这些代码不会被桌面浏览器使用，我们也不支持某些过时的设备。

编辑：如果您想使用代码检测＆lt; = GDR1，您可以使用：https://stackoverflow.com/a/32431077/436776

Windows Phone 8中的WebBrowser自定义字体

2 个答案: