css 字体系列：为什么某些字体无法在移动设备上呈现答案

【问题标题】：css font family : Why some font doesn't render on mobilecss 字体系列：为什么某些字体无法在移动设备上呈现
【发布时间】：2013-02-22 13:24:33
【问题描述】：

有人知道为什么我的某些字体系列无法在某些移动设备上呈现吗？这是一个演示字体的页面：

http://jl.evermight.com/font/

字体在桌面 chrome 浏览器、ipad 和 iphone 上正确呈现。但是当我在我的 Galaxy Note 上查看该页面时，Have A Nice Day 字体呈现为看起来像 arial 的东西。在我的朋友 nexus 4 上，祝你有美好的一天工作正常，但宇宙浓缩呈现为看起来像 arial 的东西。

有人知道为什么吗？

我附上了字体应该是什么样子的屏幕截图

补充说明 有人声称“美好的一天”不适用于 Firefox 或 IE10。对我来说，该字体适用于 Firefox。我没有IE10，所以无法验证。

如何让这个字体在我的安卓设备上工作？

附加说明 我的 css 文件的链接路径输入错误。我现在已经纠正了。但问题仍然出现在我的 droid 浏览器中。

【问题讨论】：

也不会在 Firefox 上呈现。可能与浏览器支持的字体格式有关。
顺便说一句，它在我的 Galaxy Note 的 Chrome 浏览器上运行良好。你是原生安卓浏览器还是哪个浏览器有问题？
没错，我用的是原生droid浏览器。

标签： css font-face font-family

【解决方案1】：

刚刚试用了我手机上的链接 - HTC 8s，一切似乎都运行良好。以下是相同的屏幕截图。

在 HTC 8S 上

在 IE 10 上

【讨论】：

您好 Yasser，实际上在您的图像中，最后两种字体无法正常工作。将您的 HAVEANICEDAY(s) 与我的问题进行比较。你遇到了和我的银河笔记一样的问题。
但是同样的两种字体在 IE 10 上也不起作用，所以仍然不是移动相关的问题，而是浏览器的问题。（已添加 IE 截图）
Firefox 和 IE（以及本机 droid）由于某种原因不支持这些字体，我相信这是 OP 的问题。
@FabrícioMatté - 如果是这样，有没有办法让它在这些浏览器中工作？
哦，很奇怪，我已经在 Firefox 18、19 和 22a 上进行了测试，但在这些上都不起作用。考虑过重新转换 woff 和 ttf 文件，尽管这很可能不是问题。我也有在某些浏览器中无法使用的字体文件。

【解决方案2】：

可能是下载问题。您声明中列出的字体应该适用于大多数浏览器（只要确保您不在 Opera Mini 中，它并不真正支持任何东西）。

此外，Have a Nice Day 是通过 CSS 文件中的 @font-face 声明加载的，但其他似乎是从 JavaScript 加载的，这可能是问题的一部分。默认情况下，Droid Sans 在 Android 手机上，因此他们可能只是将它们拉到本地，这就是它们在 Android 上全面工作的原因。从那里开始，可能是 JavaScript 支持的不同（例如，如果 Universe 不起作用，则 JS 未打开）。

另一件可能有帮助的事情是在无法运行的桌面浏览器中打开开发人员工具（对于 Firefox，您需要选择 Firebug 扩展程序）。检查“网络”或“网络”选项卡，看看您的字体文件是否正在下载。

如果这仍然不起作用，请尝试在声明中调整字体文件的顺序。我看到浏览器对订单有异议。

此外，Droid Serif 字体可从Google Web Fonts 获得，它可以跨浏览器使用，不会让人头疼。可能值得看看您的其他字体（或类似字体）是否也在那里，并且只需使用 Google 的 Web Font Loader 来加载您的字体。

【讨论】：

【解决方案3】：

问题已解决。显然 myfonts.com 上有一个错误损坏了我的字体文件。我联系了 myfonts.com，他们立即纠正了这个问题。然后将字体文件重新发送给我。现在一切正常。

myfonts.com 的人很棒。非常好的客户 + 技术支持服务。

【讨论】：

【解决方案4】：

下面是我如何使用@fontfaces 以实现跨浏览器兼容性的链接。

Cross Browser Fontface

【讨论】：

虽然这在技术上可能会或可能不会回答问题，但您应该在回答中写出更好的解释。众所周知，链接会失效，因此依赖于链接的答案将来可能会变得毫无用处。