如何在基于Ruby的网站上使iOS Safari浏览器支持Font Awesome字体图标

Question

我已经搜索并尝试找到答案，但似乎没有任何有效的解决方案。

我们正在编写一个Ruby Web App。使用最新版本的Font Awesome（3.2.1），在iOS上无法呈现图标。虽然我们能够在桌面浏览器上使用其他Web字体（@font-face方法）进行呈现，在iOS上依旧有问题。

在iOS的网页检查器或桌面Chrome和Safari中未看到任何错误信息。我们可以让其他网站在iOS上正常使用Font Awesome，但是使用Ruby on iOS时无法实现。

已尝试使用较旧版本的Font Awesome 进行本次实例，但没有成功。

- Robert Egnacheski

---

为了确定问题实际上是什么，你是否偶然间能够成功地在 Ruby Web 应用中使用任何其他自定义字体？ - Elise Chant

Answer 1

Font awesome使用多种不同的文件类型来嵌入它的字体。

如果您的网站在某些浏览器中显示不正常，很可能是您没有正确地复制其中一个字体源。

根据iOS版本的不同，我建议您再次检查.ttf和.svg格式。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0'); /* IE9 Compat Modes */
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), /* Modern Browsers */
       url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');/* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

- jnowland