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

Question

在带有 Cordova/Phonegap 的 Windows Phone 8 中，字体对我不起作用。

使用库存的 Cordova WP8 模板，我添加了一个简单的字体定义并设置*为使用该字体或wingdings（更清楚的是它不起作用）。

html

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

字体位置

（哇，这张图好大）

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

字体在 chrome 中工作

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

字体在 IE10 中有效

但是，如果我在 Windows Phone 8 模拟器上运行它，我会得到以下结果：

windowsphone8模拟器

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

更新：

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

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

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

新的 CSS

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

设备就绪

顺便说一句：loadjscssfile()是我从http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml获得的一个小脚本，用于将文件内容加载fonts.css到 DOM 中。

我在 Internet Explorer 10/9、Chrome 和 Firefox 中检查了它。3 秒后，字体发生变化。我在 Windows Phone 8 模拟器中尝试过。3 秒后，侧翼。

score 10 · Accepted Answer

如果 css 存储在本地（IsolatedStorage 或 XAP 内容），则在 css 中定义的字体将不起作用。我有类似的问题，这是 WP WebBrowserControl 团队的回复：

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

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

编辑

我还尝试了以下方法 - 将字体加载到 wp8 silverlight 应用程序，以便它可以通过名称识别（与其他预加载字体一样），这适用于 silverlight ui - 我可以从 xaml 中按名称引用这个新字体，但不幸的是这没有不适用于网络浏览器内容。

score 6 · Accepted Answer

看起来如果您将字体编码为 base64 并将其直接放在 css 文件中，那么它也可以在 WP8 应用程序中使用。

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

score 1 · Accepted Answer

好吧，我遇到了同样的问题，所以我的解决方法是：我正在使用 sencha touch，所以我有两个单独的 css 文件。对于图标元素，我添加了额外的类 win 和我添加的 windows css

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

好吧，它可能被吓到了，但它仍然有效，这就是它解决方法的原因，因为我没有找到更好的东西

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

score 0 · Accepted Answer

You can just remove the version of the ttf font :

This one help me for jQuery Mobile and Ionic framework.

4 回答 4