在Phonegap Windows Phone 8应用程序中使用css font-face

Question

在带有Cordova/Phonegap的Windows Phone 8中,Font-face对我不起作用.

使用股票Cordova WP8模板,我添加了一个简单的字体 - 面部定义并设置*为使用该字体或翼形(更清楚它不起作用).

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

(哇,图像很大)

如果我在Chrome中运行此功能,则会正确加载字体:

即使我在IE10(或IE9模式)中运行它,它也会正确加载字体:

但是,如果我在Windows Phone 8模拟器上运行它,我会受到影响:

有任何想法吗？解决方法？我应该继续跳下桥吗？

更新:

有人建议使用WOFF字体格式,所以我去了http://www.font2web.com/并转换了我的TTF字体.我将新文件复制到我的www/fonts/文件夹中.和以前一样,我确保将"Build Action"设置为Content和Copy Always.

另外,我读了一些关于在deviceReady事件触发后尝试加载字体的内容.值得一试......不能伤害任何事情.

这是名为`fonts.css'的css文件,它定义了一个包含所有可能组合的新font-face:

然后,我编辑了库存js/index.js并添加了一些脚本,以便fonts.css在deviceReady之后将新动态加载到DOM中:

BTW:loadjscssfile()是我从http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml获取的一个小脚本,用于将fonts.css文件内容加载到DOM中.

我在Internet Explorer 10/9,Chrome和Firefox中进行了检查.3秒后,字体会改变.我在Windows Phone 8模拟器中尝试过它.3秒后,翼了.

Answer 1

如果css存储在本地(IsolatedStorage或XAP内容),则css中定义的字体将不起作用.我有类似的问题,这是来自WP WebBrowserControl团队的回复:

这是一个已知问题,遗憾的是,除了远程托管页面和资源之外,没有其他已知的解决方法.

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

编辑

我也尝试了以下 - 加载字体到wp8 silverlight应用程序,因此它可以通过名称识别(作为其他预装字体),这适用于silverlight ui - 我可以从xaml引用这个新的字体名称,但这不幸的是没有适用于webbrowser内容.

Answer 2

看起来如果你在base64中对字体进行编码并将其直接放在css文件中,那么它也适用于WP8应用程序.

使用Icomoon或Fontsquirrel等Web应用程序,您可以轻松生成包含base64字符串的css.