在移动设备上使用自定义font-face和Font Awesome字体的奇怪问题

Question

我在移动设备上使用font-face时遇到问题。

我有以下自定义字体面定义的Rex字体

@font-face {
        font-family: 'RexBold';
             src: url('RexBold.eot?#iefix') format('embedded-opentype'), url('RexBold.otf')  format('opentype'),
                  url('RexBold.woff') format('woff'), url('RexBold.ttf')  format('truetype'), url('RexBold.svg#RexBold') format('svg');
                  font-weight: normal;
                  font-style: normal;
           }

所有文件都可以从客户端访问，而不是提供404或类似的东西

一切都在桌面浏览器下工作（当然除了IE 6和7以外.IE 9及以上版本工作正常。）但它不适用于移动设备（在Android 2.3,4.4和IOS 6上测试）

首先，我认为svg字体（#RexBold部分）的生成定义中存在错误，但定义正确 - #RexBold是svg文件中font-face的正确引用。 / p>

然后我假设我的网络服务器（nginx 1.6）正在为字体提供错误的mime类型。我根据HTML5 Boilerplate config

更新了我的mime.types配置文件

但这也行不通。顺便说一下，我网站上的Font Awesome（4.0）也不适用于移动设备，但它正在their official site上运行。我使用他们的guide将Font Awessome连接到站点（使用Bootstrap CDN），我使用以下css规则：

ul.fa-icon-check li:before {    
    font-family: 'FontAwesome';
    content: '\f14a';
    margin:0 5px 0 -21px;
    font-size: large;
}

任何人都可以告诉我这可能有什么问题吗？ 提前致谢！以下是我网站的链接 - http://study-in-japan-guide.com/ru/

Answer 1

尚未在移动设备上加载fonts.css文件（http://study-in-japan-guide.com/themes/heywater_edited/fonts/fonts.css）。因此，它没有加载@ font-face。

从桌面：

来自手机：