2

これは、Chrome (上) と Firefox (下) の Web サイトの画像です。アイコンは 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 に答える