Windows Phone 8 上不显示 Font Awesome答案

【问题标题】：Font Awesome not displayed on Windows Phone 8Windows Phone 8 上不显示 Font Awesome
【发布时间】：2013-04-04 19:09:43
【问题描述】：

我有一个使用 Font Awesome 字体来显示图标的测试站点。

这些图标在我的 IE 和 Chrome 桌面以及 iPhone 和 Andriod 移动设备上都能正常显示。

但是，Nokia Lumia 920 Windows Phone 8 上不显示字体图标。

我无法弄清楚是什么导致了问题。在诺基亚 Lumia 920 Windows Phone 上正确显示 Font Awesome 图标字体的其他网站。因此，我创建的设置肯定有一些特定的内容。

测试地点是：http://www-peachtreedata.azurewebsites.net/?page_id=6

任何关于如何让它在 Windows Phone 平台上工作的建议都将不胜感激。

【问题讨论】：

你在使用网络字体吗？
是的——我正在使用来自fortawesome.github.com/Font-Awesome的Font Awesome网络字体

标签： css windows-phone-8

【解决方案1】：

在这种情况下，观察到的问题只是实际问题的症状。我自己的网站也有同样的问题。但事实证明这不是 Windows Phone 的问题，而是 IIS 7 - 8.1 为 Web 字体文件提供了错误的 MIME 类型。确保为您的字体文件提供正确的 MIME 类型，如下所示：Proper MIME type for fonts

此外，如果您为字体使用 Windows Azure 存储，则必须手动设置每个文件的 MIME 类型。对现有文件执行此操作的最简单方法是通过众多 Azure 存储前端编辑器之一。

HTH

【讨论】：

这是解决这个问题的方法。正如我最初认为的那样，这不是 Windows Phone 问题。相反，这是服务器上未正确设置 MIME 类型的问题。
@RichardWest 您最终更改了哪些 MIME 类型以使其正常工作？你用application/font-woff了吗？在哪些类型上？谢谢！

【解决方案2】：

我能够使用 base64 让我的字体/图标集被 Windows Phone 8 识别。确保您使用 WOFF 和 TTF 字体如下（其中 * 是长 base64 字符串）：

@font-face {
    font-family: 'icomoon-ac';
    src: url(data:application/x-font-woff;charset=utf-8;base64,***) format('woff'),
        url(data:application/x-font-ttf;charset=utf-8;base64,***) format('truetype');
    font-weight: normal;
    font-style: normal;
}

更新： 这个话题再次出现在 Hacker News 上，所以让我在这里详细说明我的原始帖子，以防它帮助其他人： 1）我只试过icomoon，和 2) 我只使用了 1 种嵌入字体。

我使用 jqMobi（现在称为 Intel App Framework）来构建一个针对所有主要移动浏览器的移动网站。 jqMobi 框架包含约 70 个来自 icomoon 的图标，嵌入到其 ui CSS 中。我还需要一些，所以我最初尝试通过制作另一个名为 icomoon-extra 的字体文件来扩展它，将其上传到 http://www.motobit.com/util/base64-decoder-encoder.asp 以生成 base64 字符串并将另一个 @font-face 添加到 jqMobi CSS。这对我不起作用，所以我只是创建了一个新的 icomoon-ac 文件，其中包括来自 jqMobi icomoon 选择的大部分原始图标，以及我需要的另外约 30 个左右的图标。现在，我只是在框架中使用我的 icomoon-ac 字体，它就可以工作了。同样，只有 1 种嵌入字体。

【讨论】：

太好了，谢谢！你有我可以用我的 WP 7.5 测试的 URL 吗？
请私信我（我的电子邮件列在我的 SO 个人资料中），我会向您发送移动网站的链接，以便您可以直接测试字体。
我用诺基亚 Windows Phone 7.5 IE 检查了 Anthony 的页面，嵌入的字体显示不正确。我看到的不是 icomoon 图标，而是在字体中缺少某些字母时显示的占位符字符。
很高兴知道并感谢您的跟进。 FWIW，请注意，最初的问题是希望支持“Windows Phone 8”，而不是 Windows Phone 7.5。

【解决方案3】：

CSS `@font-face` 在 Windows Phone IE 中无法可靠运行。

Font Awesome 等图标字体依赖于从远程服务器加载适当的字体文件。显然，在 Windows Phone 上使用@font-face 加载额外字体是不可能的。根据来源，这仅适用于 Windows Phone 7，甚至适用于版本 8：

Microsoft states Web 字体在 7.1 上不起作用
This SO thread 和 another one 报告了 7.5 的问题，但可能暗示了可能的解决方案
在this post 的cmets 中指出，即使是Base64 编码的字体也不能在模拟器中工作。如果我有时间，我会在真机上测试这个（7.5）。
即使是现代化的has some problems with this

旁注：在我的 Windows Phone 上，microsoft.com 与 Tahoma 一起显示，这是堆栈中的第二个字体：

 font-family: wf_SegoeUI, Tahoma, Verdana, Arial, sans-serif;

有趣，因为 Windows phone has a local copy of Segoe UI available。我想知道为什么 MS 的网络人员不把第二个放在堆栈中......

【讨论】：

有什么办法可以请求这种支持吗？真的很惊讶（不是很惊讶，有点习惯了）使用所有 Microsoft 技术并且它不支持其他人所做的事情......
我不知道应该怎么问 M$，但这肯定不是我 7.5 上的 IE 瘫痪的唯一原因。
非常感谢您发布此信息...我可以确认 WP8 (HTC 8x) 仍然存在该问题。我在尝试加载 2 个 base64 网络字体（我的 css 中的 2 行 @Font-face 加上定义）时遇到了完全相同的问题。 WP8/ie 不能识别这两种字体，它只能使用一种。就我而言，我一直在使用 icomoon (icomoon.io/#icons)

【解决方案4】：

好的，这就是在 IIS7.5 上对我有用的方法。我不得不将 MIME 类型 .otf、.svg 和 .woff 添加到 IIS，因为它们还不存在。要添加新的 MIME 类型转到 IIS，请单击 MIME types 模块，右键单击并选择 Add...

    .eot -> application/vnd.ms-fontobject
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/font-sfnt
    .woff -> application/font-woff

【讨论】：

【解决方案5】：

这可能会在 8.1 更新中修复：

“从 Windows Phone 8.1 更新的 Internet Explorer 开始，Windows Phone 上的 Internet Explorer 允许跨域字体加载，而不管访问控制标头如何，以提高与现有站点的兼容性”[1]

【讨论】：

【解决方案6】：

与@flo 的回答类似，我可以确认 Windows Server 2008R2 上的 IIS7.5 中的以下 mime 类型，更正问题：

    .eot -> application/octet-stream
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/octet-stream
    .woff -> application/font-woff

【讨论】：

CSS @font-face 在 Windows Phone IE 中无法可靠运行。

CSS `@font-face` 在 Windows Phone IE 中无法可靠运行。