简体繁体 English

Windows Phone 8 HTML5应用程序中的Webfont

[英]Webfont in Windows Phone 8 HTML5 App

原文 2013-01-15 21:57:28 6 7 javascript/ css/ html5/ windows-phone-8/ windows-phone

I can't get any web fonts to work in my Windows Phone 8 HTML5 Application. 我无法在Windows Phone 8 HTML5应用程序中使用任何网络字体。

I do the following: 我执行以下操作：

Create a new Windows Phone HTML5 App Project 创建一个新的Windows Phone HTML5应用项目
Copy my WOFF font (though I've also tried eot and ttf) to the project root, and add it to the project as an existing item 将我的WOFF字体（尽管我也尝试过eot和ttf）复制到项目根目录，并将其作为现有项添加到项目中
Add in this CSS to the index.html file 将此CSS添加到index.html文件

If anyone could create a template Windows Phone 8 project with simple working local web fonts, I'd be super appreciative. 如果有人可以使用简单的本地Web字体创建模板Windows Phone 8项目，我将非常感激。 This has got me really stuck. 这让我真的陷入困境。

7 个解决方案

Windows phone supports web fonts. Windows Phone支持Web字体。 However, if they are embedded on the XAP they will not work. 但是，如果它们嵌入在XAP上，它们将无法工作。

Engineering response: This is a known issue, the only workaround we know is to host the fonts on a remote server (making sure to bypass the single origin policy issue) and perhaps use AppCache to keep the font files locally on the device. 工程响应：这是一个已知问题，我们知道的唯一解决方法是将字体托管在远程服务器上（确保绕过单一来源策略问题），并可能使用AppCache将字体文件保留在设备上的本地位置。

Thanks, 谢谢，

显然，这是一个已知问题，并且，作为一种解决方法，您需要在远程服务器中托管字体，直到Microsoft解决此问题为止。

I have been able to use local truetype web fonts in Windows Phone 8 HTML apps with no problems. 我已经能够在Windows Phone 8 HTML应用程序中毫无问题地使用本地truetype网络字体。 You must ensure that the embeddable flag within the the font is set to 0 using software such as TTFEdit . 您必须确保使用TTFEdit之类的软件将字体中的embeddable标志设置为0。

Check out the full answer I gave to a similar stackoverflow question here. 在这里查看我对类似的stackoverflow问题的完整答案。

I think this might be better than the accepted answer but I'm a n00b so I can't add a comment to that yet. 我认为这可能比接受的答案更好，但是我是n00b，所以我无法对此发表评论。

I have searched and found the following post. 我已经搜索并找到以下帖子。 May be it is related. 可能是相关的。

Phonegap Windows Phone 7 Dynamic HTML loading and cross-domain calls using jQuery 使用jQuery的Phonegap Windows Phone 7动态HTML加载和跨域调用

"If Cordova is not initialized (ie the device ready has not fired), the browser control treats it like a remote get and lands you in to the usual Cross-Origin issue and rejects" This is probably the case for CSS. “如果未初始化Cordova（即尚未就绪的设备就绪状态），则浏览器控件会将其视为远程获取，并使您进入常见的跨域问题并拒绝”。CSS可能就是这种情况。 May be you can try loading CSS dynamically after deviceready event and see what happen. 可能是您可以尝试在deviceready事件之后动态加载CSS，然后看看会发生什么。

NB: Same answer I posted there Phonegap/Cordova web-fonts with Windows Phone 8 注意：我在Windows Phone 8中使用Phonegap / Cordova网络字体发布了相同的答案

I have just noticed in this video. 我刚刚在这段视频中注意到了。 http://channel9.msdn.com/Blogs/Interoperability/Getting-started-with-Windows-Phone-8-and-Cordova At around 4:12, it mentions the build action has to be set to "content" in order for the file to be seen. http://channel9.msdn.com/Blogs/Interoperability/Getting-started-with-Windows-Phone-8-and-Cordova在4:12左右，它提到构建动作必须按顺序设置为“内容”以便查看文件。 Not sure if that helps anything, since we already have a report about a bug. 不确定是否有帮助，因为我们已经有关于错误的报告。 :p But I hope it worth sharing anyway. ：p但是我还是希望值得分享。 :) :)

I solved this problem using Cufon http://cufon.shoqolate.com/ . 我使用Cufon http://cufon.shoqolate.com/解决了这个问题。 Cufon renders images instead of text, so that is the reason why this works on Windows Phone. Cufon渲染图像而不是文本，因此这就是在Windows Phone上工作的原因。

Here is documentation and usage: https://github.com/sorccu/cufon/wiki . 这是文档和用法： https : //github.com/sorccu/cufon/wiki 。 I hope this helps. 我希望这有帮助。

It looks like if you encode the font in base64 and put it directly in the css file, than it works in WP8 app as well. 看起来，如果您在base64中对字体进行编码，然后直接将其放在css文件中，那么它在WP8应用程序中也可以正常工作。

With web apps like Icomoon or Fontsquirrel you can easily generate the css containing the base64 string. 使用Icomoon或Fontsquirrel等网络应用程序，您可以轻松生成包含base64字符串的css。