IE8 或更低版本中的 Google Webfonts (Loader)答案

【问题标题】：Google Webfonts (Loader) in IE8 or lowerIE8 或更低版本中的 Google Webfonts (Loader)
【发布时间】：2012-09-16 06:25:02
【问题描述】：

我正在尝试为一个 Web 项目加载大约 40 种字体。人们将能够在网上商店中选择自定义字体。我使用 Google 的 Web Font Loader，它运行良好，但在 IE8 及更低版本中除外。

所以我正在打印我的 php 数组，其中包含 Webfont Loader 需要从 Google 加载的正确字体系列。如果我尝试加载所有 40 种字体，它可以在除 Internet Explorer 8 及更低版本之外的所有浏览器中使用。

如果我将我的字体数组限制为 6 种字体，那么这 6 种字体会被加载。但是当我只向数组中添加一种字体时，IE8 无法加载字体。我在开发者工具的“网络”选项卡中收到错误请求，但我在 http 请求中的 url 似乎没问题。

以前有人遇到过这个问题吗？ IE8及以下的HTTP-Header中Request 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>

我还尝试将所有家庭粘贴到一个“链接”中。而且.. 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

【问题讨论】：

标签： javascript internet-explorer-8 webfonts google-webfonts

【解决方案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 don't work in IE8。本文还介绍了如何在 IE8 中通过“”标签加载多种字体失败 - 因此，此错误似乎并非特定于使用 Web 字体加载器。

【讨论】：