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

【问题标题】：Using css font-face in a Phonegap Windows Phone 8 app在 Phonegap Windows Phone 8 应用程序中使用 css font-face
【发布时间】：2013-01-29 03:30:02
【问题描述】：

字体在带有 Cordova/Phonegap 的 Windows Phone 8 中不适合我。

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

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

（哇，这张图好大）

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

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

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

有什么想法吗？解决方法？我应该直接跳桥吗？

更新：

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

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

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

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

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

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

【问题讨论】：

您能否尝试在默认浏览器中加载该页面，看看您会得到什么？ WebView 可能会使用与浏览器相同的引擎，所以如果它在那里不工作，它就不会在应用程序中工作。
我尝试了您帖子中描述的所有内容，还尝试了对字体进行 base64 编码。这在浏览器中照常工作，但在设备上不起作用。
解决方案：stackoverflow.com/questions/14558331/…

标签： cordova windows-phone-8

【解决方案1】：

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

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

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

编辑

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

【讨论】：

你在开玩笑吗？那是哪种工程？在我的生活中从未见过这种事情..
这不适用于cordova案例=/有什么提示吗？也许立即下载并缓存字体？我的应用中有大约 5 个，我不希望用户总是有互联网。

【解决方案2】：

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

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

【讨论】：

这有效——不仅适用于 WP，也适用于 iOS 和 Android。您不一定需要任何特殊的转换，例如Fontsquirrel 提供；例如 PHP 的输出：base64_encode(file_get_contents('font.ttf')) 就足够了。以及懒惰的相关css代码：src: url(data:font/ttf;charset=utf-8;base64,data) format('truetype')
@JariKeinänen 你的font/ttf mime 类型不存在。它将是：application/x-font-ttf 用于 TTF 字体，application/vnd.ms-fontobject 用于 EOT。
@andreszs :) 你在我发表评论的时候是对的（2015 年）但是现在 IANA 已经更新为 MIME 类型，它们是在 2017 年 2 月左右添加的（or at least the RFC is dated so 因为它被广泛使用（尽管当时不存在）和“高度直观”）。 +1 让我检查一下。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

这个对 jQuery Mobile 和 Ionic 框架有帮助。

【讨论】：