css - 使用 IcoMoon 字体和在 Chrome 上查看是否存在已知的故障？

Question

这是 Chrome(上)和 Firefox(下)上的网站图像。这些图标在 Firefox 中显示，但在 Chrome 中不显示。

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

这里有一些 CSS(我也有重置 CSS)和 HTML，以防出现问题:

/* 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><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="234d424e4663464e424a4f0d404c4e" rel="noreferrer noopener nofollow">[email protected]</a></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span aria-hidden="true" class="icon-key-stroke"></span>
                        <span>Log Out</span>
                    </a>
                </li>
            </ul>
        </div>

更新

刚刚查看控制台，发现当图标不显示时，它会出现以下警告:

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

另一个更新

无论我使用类名还是数据图标内容值方法，都会发生此问题。

Answer 1

我自己无法重现这个问题。您生成的示例文件也有这个问题吗？

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