Question

我遇到一个问题，我的自定义下载的Fontello正在iOS上的Chrome和Safari上加载，但在Android或桌面浏览器上没有（在调整窗口大小时）。该字体用于每个帖子中移动共享按钮中的图标。

网站：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

我看看这个答案：https://stackoverflow.com/a/26521650/4556503

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

Fontello渲染在iOS上，但不是Android和桌面浏览器

1 个答案: