使用IcoMoon字体并在Chrome上查看是否存在已知的故障？ [英] Is there a known glitch with using IcoMoon fonts and viewing on Chrome?

问题描述

以下是Chrome（上）和Firefox（下）的网站图片。图标显示在Firefox中，但不显示在Chrome中。

Here's an image of a website on Chrome (top), and Firefox (bottom). The icons are showing in Firefox, but not in Chrome.

有趣的是，如果我刷新几次，图标有时会出现。

The funny thing is that if I refresh it a few times, the icons sometimes appear.

这里有一些CSS CSS也）和HTML，如果它有一个问题：

Here's some of the CSS (I have a reset CSS too) and HTML, in case there is an issue with it:

/* CSS */

@font-face {  font-family: 'Oswald';  font-style: normal;  font-weight: 400;  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');} @font-face {  
font-family: 'Open Sans';  font-style: normal;  font-weight: 400;  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

.opensans { font-family: 'Open Sans', sans-serif; } 
.oswald { font-family: 'Oswald', sans-serif; }

html { background:#ccc; }
body { color:#444;font-family:'Open Sans'; }
h1,h2,h3,h4,h5 { font-family:'Oswald'; }
body > div {position:relative;background:#f8f8f8;}
span[class^="icon-"] { font-size: 19px;float: left; }
#top { background:#f3f4f5;border-bottom:solid #333 5px;width:100%; }
#header { background: #414141 url(images/txture.png);color:#999; }
#header span[class^="icon-"] { margin-right:5px; }
#header li {  }
#header a, #header .text { float:left;padding: 5px 13px;color:#999;transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; }
#header a:hover { color:#ccc;background:rgba(100,100,100,0.2); }
#header [class^="icon-"]::before {  }
#header li:last-child a { float:right; }

HTML：

<div id="top">
            <ul id="header" class="clearfix">
                <li style="float:left;border-right: solid 1px #000;">
                    <a href="#" style="border-right:solid 1px #333;">
                        <span aria-hidden="true" class="icon-home"></span>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <span class="text">Tools:
                    </span>
                    <a href="#" style="padding:5px">
                        <span aria-hidden="true" class="icon-equalizer"></span>
                    </a>
                    <a href="#" style="padding:5px">
                        <span aria-hidden="true" class="icon-bars"></span>
                    </a>
                    <a href="#">
                        <span aria-hidden="true" class="icon-printer"></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span aria-hidden="true" class="icon-user"></span>
                        <span>[e-mail]</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span aria-hidden="true" class="icon-key-stroke"></span>
                        <span>Log Out</span>
                    </a>
                </li>
            </ul>
        </div>

更新

并且看到当图标不显示它有此警告：

Update

Just looked at the console and saw that when the icons don't show it has this warning:

Resource interpreted as Font but transferred with MIME type font/svg

另一个更新

发生是否使用类名或数据图标内容值方法。

Another Update

This problem is happening whether I use the class names or the data-icon content value method.

推荐答案

我无法重现问题自己。你也有这个问题与生成的样本文件吗？

I haven't been able to reproduce this problem myself. Do you have this problem with the generated sample files too?

显然，这只发生在Windows。尝试重置您的编码为PUA，它可能会解决问题。请让我们知道您的结果。

Apparently this only happens in Windows. Try resetting your encoding to PUA, it might solve the problem. Please let me know of your results.

这篇关于使用IcoMoon字体并在Chrome上查看是否存在已知的故障？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！