在 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 模板，我添加了一个简单的字体定义并设置 * 以使用该字体或 wingdings(要特别清楚它不起作用).

文件位于 /fonts 文件夹中，设置为内容"和始终复制".

(哇，图片好大)

如果我在 Chrome 中运行它，它会正确加载字体:

即使我在 IE10(或 IE9 模式)下运行它，它也能正确加载字体:

但是，如果我在 Windows Phone 8 Simulator 上运行它，就会出现问题:

有什么想法吗?解决方法?我应该直接从桥上跳下来吗?

更新:

有人建议改用 WOFF 字体格式，所以我去了 将 fonts.css 文件的内容加载到 DOM 中.

我在 Internet Explorer 10/9、Chrome 和 Firefox 中进行了检查.3 秒后，字体发生变化.我在 Windows Phone 8 模拟器中尝试过.3 秒后，翅膀.

解决方案

在 css 中定义的字体将不起作用如果 css 存储在本地(IsolatedStorage 或 XAP 内容).我遇到了类似的问题，这里是 WP WebBrowserControl 团队的回应:

<块引用>

这是一个已知问题，不幸的是没有已知的解决方法除了远程托管页面和资源.

因此，作为一种解决方法，您可以尝试在远程站点上托管您的 css 和 html 文件，但我知道这并不理想.

编辑

我也尝试了以下 - 将字体加载到 wp8 silverlight 应用程序，以便它可以通过名称识别(作为其他预加载的字体)，这适用于 silverlight ui - 我可以从 xaml 中通过名称引用这种新字体，但是不幸的是，这不适用于网络浏览器内容.

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屋！