Google网络字体的本地回退

Question

如果由于某种原因导致Google CDN版本无法加载,HTML5 Boilerplate将使用脚本加载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执行此类操作？含义:如果远程字体无法加载,请使用服务器上存储的字体的本地副本.

Answer 1

我刚刚遇到这个问题并且在我来到这个页面后想到了一个解决方案:

@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")并将其放入font-family样式列表中.

瞧!

Answer 2

如果您下载所有必要的 webfonts 并将其存储在本地文件 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 同时失败。