在PhoneGap Windows Phone 8应用中使用css font-face [英] Using css font-face in a Phonegap Windows Phone 8 app

问题描述

Font-face在使用Cordova / Phonegap的Windows Phone 8中无法使用。

使用股票Cordova WP8模板，我添加了一个简单的font-face并设置 * 以使用该字体或winget（非常清楚，它不工作）。

档案位于 / fonts 文件夹，设置为Content和始终复制。

（图片很大）

如果我在Chrome中执行此操作，则会正确加载字体：

即使我在IE10（或IE9模式）下运行它，它会正确加载字体：

但是，如果我在Windows Phone 8模拟器上运行它，我会飞来飞去：

任何想法？解决方法？

有人建议改用WOFF字体格式，所以我去了加载 fonts.css file into the DOM。

我在Internet Explorer 10/9，Chrome和Firefox中检查过。 3秒后，字体改变。我试过在Windows Phone 8模拟器。

解决方案

css中定义的字体无法工作如果css存储在本地（IsolatedStorage或XAP内容）。我有类似的问题，这里是来自WP WebBrowserControl团队的响应：

这是一个已知的问题，不幸的是没有已知的解决方法$ b $

因此，作为解决方法，您可以尝试在远程站点托管您的css和html文件但我理解这不太理想。

EDIT

尝试以下 - 加载字体到wp8 silverlight应用程序，所以它可以通过名称（作为其他预加载字体）和这工作为silverlight ui - 我可以参考这个新的字体通过名称从xaml，但这不幸的是没有工作webbrowser内容。

Font-face does not work for me in Windows Phone 8 with Cordova/Phonegap.

Using the stock Cordova WP8 template, I added a simple font-face definition and set * to use that font OR wingdings (to be extra clear that it's not working).

The file is in the /fonts folder, set to build as "Content" and "Copy Always".

(wow that image is huge)

If I run this in Chrome, it loads the font properly:

Even if I run it in IE10 (or in IE9 Mode), it loads the font properly:

But, if I run it on the Windows Phone 8 Simulator, I get wingdings:

Any ideas? Workarounds? Should I just go ahead and jump off a bridge?

UPDATE:

Someone suggested using WOFF font format instead, so I went to http://www.font2web.com/ and converted my TTF font. I copied the new files into my www/fonts/ folder. As before, I made sure the "Build Action" is set to Content and Copy Always.

Also, I read something about trying to load the fonts after the deviceReady event fires. Worth a try... can't hurt anything.

Here's the css file called `fonts.css' that defines a new font-face with all the possible combinations:

Then, I edited the stock js/index.js and added some script to dynamically load the new fonts.css into the DOM after deviceReady:

BTW: loadjscssfile() is a little script I got from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml to load the contents of the fonts.css file into the DOM.

I checked it in Internet Explorer 10/9, Chrome, and Firefox. After 3 seconds, the fonts change. I tried it in the Windows Phone 8 simulator. After 3 seconds, wingdings.

解决方案

Font-face defined in css won't work if css is stored locally (IsolatedStorage or XAP content). I had similar issue and here is response from WP WebBrowserControl team:

This is a known issue and unfortunately there is no known workaround other than hosting the page and resources remotely.

So as a workaround you can try to host your css and html file on remote site but I understand that is not ideal.

EDIT

I've also tried the following - load font to wp8 silverlight app so it could be recognized by name (as other preloaded fonts) and this worked for silverlight ui - I could refer to this new font by name from xaml, but this unfortunately didn't work for webbrowser content.

这篇关于在PhoneGap Windows Phone 8应用中使用css font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！