Is there a known glitch with using IcoMoon fonts and viewing on 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.

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>name@email.com</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.

回答1:

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

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

来源：https://stackoverflow.com/questions/13203929/is-there-a-known-glitch-with-using-icomoon-fonts-and-viewing-on-chrome

标签

css3

fonts

font-face