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

Question

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

使用股票Cordova WP8模板，我添加了一个简单的字体 - 面部定义并设置*以使用该字体或翼形（更清楚它不起作用）。

该文件位于/fonts文件夹中，设置为“内容”和“始终复制”。

（哇，图像很大）

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

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

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

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

更新

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

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

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

然后，我编辑了股票js/index.js并添加了一些脚本，以便在deviceReady之后将新的fonts.css动态加载到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等网络应用，您可以轻松生成包含base64字符串的css。

Answer 3

我有同样的问题所以我的解决方法是： 我正在使用sencha touch，所以我有两个单独的css文件。对于图标元素，我正在添加额外的类获胜，并添加到Windows css

.list.win {
  background-image: url('data:image/png;base64,IMAGECODE HERE');
}

好吧它可能已经st但仍然有效，这就是为什么它解决方法，因为我没有找到更好的东西

PS：我的解决方案是使用字体作为图标。

Answer 4

您可以删除ttf字体的版本：

Getting a web-font to work on an HTML5 Windows Phone App?

这个帮助我学习jQuery Mobile和Ionic框架。