Fontello 在 iOS 上呈现，但不在 Android 和桌面浏览器上呈现

Question

我有一个问题，我的自定义下载的 Fontello 在 Chrome 和 iOS 中的 Safari 上加载，但在 Android 或桌面浏览器（调整大小时 window).每个 post.

中的移动共享按钮中的图标均使用该字体

网站：http://www.mtscollective.com

加价：

<div>
    <ul class='mobile-share-bar'>
        <li><script>
            var strPostUrl = "<data:post.url/>";
            document.write("<a class='mobile-share-button icon-facebook' href='http://www.facebook.com/sharer.php?u="+strPostUrl+"' id='fb-mobile-button' target='_blank'><span class='share-text'>Share</span></a>");
        </script></li>

        <li><script>
            var strPostUrl = "<data:post.url/>";
            var strPostTitle = '<data:post.title/>';
            document.write("<a class='mobile-share-button icon-twitter' href='https://twitter.com/share?text="+strPostTitle+"&amp;url="+strPostUrl+"&amp;via=MTS_Collective' id='twitter-mobile-button' target='_blank'><span class='share-text'>Share</span></a>");
        </script></li>

        <li><script>
            var strPostUrl = "<data:post.url/>";
            var strPostTitle = '<data:post.title/>';
            var strNewUrl = strPostUrl.replace("http://","");
            var strNewTitle = strPostTitle.replace(/"/g, '"');
            document.write("<a class='mobile-share-button icon-tumblr' href='http://www.tumblr.com/share/link?url="+strNewUrl+"&amp;name="+strNewTitle+"' id='tumblr-mobile-button' target='_blank'><span class='share-text'>Share</span></a>");
        </script></li>
    </ul>
</div>

CSS:

@import url(http://fonts.googleapis.com/css?family=Oswald);

    @font-face {
        font-family: 'fontello';
        src: url('http://cdn.mtscollective.com/fontello/font/fontello.eot?4448318');
        src: url('http://cdn.mtscollective.com/fontello/font/fontello.eot?4448318#iefix') format('embedded-opentype'),
            url('http://cdn.mtscollective.com/fontello/font/fontello.woff?4448318') format('woff'),
            url('http://cdn.mtscollective.com/fontello/font/fontello.ttf?4448318') format('truetype'),
            url('http://cdn.mtscollective.com/fontello/font/fontello.svg?4448318#fontello') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [class^="icon-"]:before, [class*=" icon-"]:before
    {
        font-family: "fontello";
        color: #fff;
        font-style: normal;
        font-weight: normal;
        speak: none;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-right: .3em;
    }

    .icon-facebook:before
    {
        content: '\e806';
    }

    .icon-twitter:before
    {
        content: '\e809';
    }

    .icon-tumblr:before
    {
        content: '\e808';
    }

我真的不确定是什么让它无法在任何地方工作。我已清除 iOS 上的缓存以确保它正在读取最新代码。

任何帮助将不胜感激！

Answer 1

在 OS X 上 Chrome 中未加载。控制台显示：Font from origin 'http://cdn.mtscollective.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.mtscollective.com' is therefore not allowed access.

看来您可能遇到与这个问题相同的问题：Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

我会看看这个答案：

您需要修改 .htaccess 以允许跨域请求。

Fontello 在 iOS 上呈现，但不在 Android 和桌面浏览器上呈现

Fontello rendering on iOS, but not Android and desktop browsers

html

css

fontello