Google Web 字体的本地回退答案

【问题标题】：Local Fallback for Google Web FontsGoogle Web 字体的本地回退
【发布时间】：2013-06-04 08:48:25
【问题描述】：

如果由于某种原因无法加载 Google CDN 版本，则 HTML5 样板会使用脚本来加载 jQuery 的本地副本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

是否可以使用 Google Web Fonts 做类似的事情？含义：如果远程字体加载失败，请改用存储在服务器上的字体的本地副本。

【问题讨论】：

标签： cdn webfonts

【解决方案1】：

如果您下载所有必要的网络字体并将其存储，例如在本地文件 Webfonts.css 中，您可以执行以下操作：

<script type="text/javascript">
if (window.jQuery) {
    document.write(unescape('%3Clink href="http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT|Yanone+Kaffeesatz|Tangerine" rel="stylesheet" type="text/css"%3E'));
}
else {
   document.write(unescape('%3Clink href="css/WebFonts.css"    rel="stylesheet" type="text/css"%3E'));
   document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')
}
</script>

注意：这是假设 cdn 的 fonts.googleapis.com 和 ajax.googleapis.com 同时失败..

【讨论】：

【解决方案2】：

我刚刚遇到这个问题，刚到这个页面就想到了解决办法：

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic);

@font-face {
  font-family: "UbuntuFallback";
  font-style: normal;
  font-weight: normal;
  src: url("/webfonts/ubuntu/ubuntu-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "UbuntuFallback";
  font-style: normal;
  font-weight: bold;
  src: url("/webfonts/ubuntu/ubuntu-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-bold-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-bold-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "UbuntuFallback";
  font-style: italic;
  font-weight: normal;
  src: url("/webfonts/ubuntu/ubuntu-italic-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-italic-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-italic-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "UbuntuFallback";
  font-style: italic;
  font-weight: bold;
  src: url("/webfonts/ubuntu/ubuntu-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("/webfonts/ubuntu/ubuntu-bolditalic-webfont.woff") format("woff"), url("/webfonts/ubuntu/ubuntu-bolditalic-webfont.ttf") format("truetype");
}

body 
{
  font-family: Ubuntu, UbuntuFallback, Tahoma, Sans-Serif;
}

所以我想使用 Ubuntu 字体，但是我们的网站在本地主机上运行，不一定连接到互联网。我为 Ubuntu 字体创建了一些 @font-face 声明，将其命名为其他名称（“UbuntuFallback”），然后将其放入字体系列样式列表中。

瞧！

【讨论】：

非常感谢 - 奇怪我怎么看不到这一点，尽管它是如此明显和优雅.. :)

【解决方案3】：

调用包含调用不同字体（此处为 Tangerine 字体）的 css 文件的客户端回退：

(function test($){
    var $span = $('<span style="display:none;font-family:Tangerine"></span>').appendTo('body'); // span test creation
    if ($span.css('fontFamily') !== 'Tangerine'){
        $('head').append('<link href="./Styles/Public/Fonts.css" rel="stylesheet">'); // fallback link
    }
    $span.remove(); // span test remove
})(jQuery);

【讨论】：