移动混合应用图片嵌入,png vs. inlined-base64 vs. font-face?

时间:2012-04-12 12:46:51

标签: css ios performance mobile extjs

我正在寻找关于这个问题的一些反馈,我正在使用Sencha Touch 2.0来构建通过PhoneGap / Cordova打包的混合应用程序。

我希望使用字体来嵌入符号(并且自动神奇地摆脱分辨率问题)。我只是爱http://fortawesome.github.com/Font-Awesome/用于桌面和桌面我想知道它是否也适合移动应用程序。

然而,我也在努力获得最好的性能。

想法是能够在巨大的列表上使用这些符号(> 500项)。而且我对这些方法(png与inlined-base64与字体)的比较完全无能为力。

看起来Sencha团队正在使用inlined-base64而不是静态png。

1 个答案:

答案 0 :(得分:1)

<强> FontAwesome

我正在开发一个我们曾经使用FontAwesome的项目,一切都在iOS上运行良好。但是我们遇到了一个大问题,它在Android上无法运行,我们也没有弄清楚如何解决这个问题。因此,如果您不考虑为Android手机制作应用程序,或者它恰好适合您,那么我建议您继续使用它。使用webfont,就像你说的,你不必关心屏幕分辨率,你可以很容易地改变图标的​​颜色和大小,我觉得很方便。

<强> PNG

我想PNG的唯一问题是你获得它们的HTTP请求数。所以我能给你的唯一建议是使用精灵。你可以使用像Glyphicons这样的东西,它给你的图标非常像FontAwesome。

内联Base64

此解决方案的唯一问题是图像URI不得大于32k(根据When to consider base64 (DATA: URI) images?)。它显然不受IE6 / 7的支持,我认为这不是问题,因为Sencha只支持webkit浏览器。

所以,根据我的经验,如果可能的话,去找FontAwesome,否则精灵应该永远是静态图像的方式。

希望有所帮助