html - 移动设备上自定义字体和 Font Awesome 字体的奇怪问题

Question

我在使用移动设备上的字体时遇到问题。

我有以下 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 文件。

然后我假设我的网络服务器 (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。

从桌面:

来自手机: