2

Web プロジェクト用に約 40 のフォントを読み込もうとしています。ユーザーは Web ショップでカスタム フォントを選択できるようになります。私は Google の Web Font Loader を使用していますが、IE8 以前を除き、うまく動作します。

そのため、Webfont Loader が Google からロードする必要がある正しいフォント ファミリを含む php 配列を出力しています。40 個のフォントすべてを読み込もうとすると、Internet Explorer 8 以下を除くすべてのブラウザーで機能します。

font-array を 6 つのフォントに制限すると、それらの 6 つのフォントが読み込まれます。しかし、配列にもう 1 つフォントを追加すると、IE8 はフォントをロードできません。開発者ツールの「ネットワーク」タブに不正なリクエストが表示されますが、http リクエストの URL は問題ないようです。

他の誰かが以前にこの問題を抱えていましたか? IE8以下では、HTTPヘッダーのリクエストURLの長さは制限されていますか?

<script type="text/javascript">
  WebFontConfig = {
       google: { families: /*json_encode(php array here)*/ },
  };
  (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
               '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
  })();
</script>

また、すべてのファミリを 1 つの「リンク」に貼り付けようとしました。しかし、.. IE8 以下の不正なリクエスト。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= /* families */">

%7 が '|' の要求 と応答:

GET /css?family=Aclonica%7CAveria+Serif+Libre%7CBoogaloo%7CCandal%7CCantora+One%7CCapriola%7CCarter+One%7CChewy%7CCoda+Caption:800%7CComfortaa%7CCourgette%7CCreepster%7CCrete+Round%7CDamion%7CDays+One%7CFrancois+One%7CFredoka+One%7CGalindo%7CGloria+Hallelujah%7CIndie+Flower%7CIrish+Grover%7CJust+Me+Again+Down+Here%7CLeckerli+One%7CLobster+Two%7CLondrina+Solid%7CLove+Ya+Like+A+Sister%7CMcLaren%7CMiniver%7CPiedra%7CPlaster%7CPoiret+One%7CQuantico%7CRacing+Sans+One%7CRadley%7CRammetto+One%7CRevalia%7CSchoolbell%7CSmokum%7CSniglet%7CStint+Ultra+Condensed%7CSue+Ellen+Francisco%7CUbuntu+Mono%7CUltra%7CUnifrakturCook:700%7CWaiting+for+the+Sunrise%7CYesteryear HTTP/1.1

https://docs.google.com/open?id=0B4anyChu_EhkRFNmRmd3UGY4RlU

そして、私が本当に奇妙だと思うのは、ResponseBody で Google から正しいデータを取得することです..

https://docs.google.com/open?id=0B4anyChu_EhkdFVqVjFVUVhFRWs

4

1 に答える 1

1

IE8以下のみWebFontLoaderで5フォントずつ読み込むことで解決。

      <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
      <script>
        <?php
          $splitArrays = array_chunk($families, 5);
          foreach ($splitArrays as $id => $split) {
            echo 'WebFont.load({google:{families: ' . json_encode($split) . '}});';
          }
        ?>
      </script>

Google Web Fonts は IE8 では機能しません。この記事では、IE8 で「<link>」タグを使用して複数のフォントをロードすると失敗する方法についても説明しています。したがって、このバグは Web フォント ローダーの使用に固有のものではないようです。

于 2012-09-26T07:02:55.620 に答える