2

这是 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>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>

更新

只是看着控制台，发现当图标不显示时，它有这个警告：

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

另一个更新

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

4

1 回答 1

3

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

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

于 2012-11-03T06:24:55.110 回答