获取网页字体在HTML5 Windows Phone应用程序上工作？ [英] Getting a web-font to work on an HTML5 Windows Phone App?

问题描述

我正在构建一个Windows Phone 8 HTML5应用程序，在网上显示一个外部网站。当页面加载时，它显示所有的内容以及正确的CSS样式，除了Web字体。 Web字体不包含在项目中，它从网上在线运行。另外，我知道JavaScript正在运行，因为其他JavaScript正在工作在页面上。有没有人知道一个解决方案，让网络字体在应用程序内工作？如果有帮助，当我将Windows Phone 8中的主浏览器引导到相关的网页时，webfonts会正常加载。 解决方案

自定义字体可以在Windows Phone 8 HTML5应用程序中使用，方法与在网站和其他移动平台的Web视图中使用的方式相同。有两件事要注意，

1. 在Visual Studio中确保字体的属性>高级>构建Action 被设置为Content，所以当项目被构建和部署时，它被复制到设备上。
   
2. 确保你使用的字体是许可的用于嵌入，并且将 truetype字体中的可嵌入标志设置为0以允许嵌入。 iOS和Android忽略这个嵌入式标签，但IE10尊重它。

您可以使用开源的检查任何truetype字体的可嵌入标志/ projects / ttfedit /rel =noreferrer> TTFEdit 。您可以通过将视图>显示>高级>嵌入的合法权限中的值更改为0并重新保存，从而使字体可嵌入。只有更改标志，如果字体授权嵌入。

我测试了一些truetype字体没有问题。到目前为止，我唯一的问题是在 font-awesome.min.css中包含 src：值的font-awesome库。 $ c>需要更改以修复IE10手机中的错误。当使用font-awesome时，
$ b src：url（'../ fonts / fontawesome-webfont.ttf？v = 4.0.3'） 将不起作用。 src：url（'../ fonts / fontawesome-webfont.ttf'） will。

I'm building a Windows Phone 8 HTML5 app that shows an external website on the web. When the page loads, it shows all the content along with the correct css styling except for the web font. The web font is not included in the project, it is run from the website online. Also, I know javascript is running because other javascripts are working on the page. Does anyone know a solution to get web fonts working inside apps? If it helps, when I direct the main web browser in Windows Phone 8 to the webpage in question, the webfonts load fine.

解决方案

Custom fonts can be used in Windows Phone 8 HTML5 apps in the same way as they are used on websites and other mobile platforms' webviews. There are two things to watch out for,

1. Within Visual Studio make sure that the font's Properties>Advanced>Build Action is set to "Content" so it is copied to the device when the project is built and deployed.
2. Make sure that the font you are using is licensed for embedding and that the embeddable flag in the truetype font is set to 0 to allow embedding. iOS and Android ignore this embeddable tag but IE10 respects it.

You can inspect the embeddable flag of any truetype font using the open-source TTFEdit. You can make a font embeddable by changing the value in View>Show>Advanced>Legal rights for embedding to 0 and re-saving it. Only change the flag if the font is licensed for embedding.

I've tested with a number of truetype fonts with no problem. My only issue so far has been when including the font-awesome library where the src: values in font-awesome.min.css needed changing to fix a bug in IE10 mobile. When using font-awesome,

src:url('../fonts/fontawesome-webfont.ttf?v=4.0.3') won't work. src:url('../fonts/fontawesome-webfont.ttf') will.

这篇关于获取网页字体在HTML5 Windows Phone应用程序上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！