Google Web字体的本地回退 [英] Local Fallback for Google Web Fonts

查看:60
本文介绍了Google Web字体的本地回退的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果出于某种原因Google CDN版本无法加载,则HTML5 Boilerplate使用脚本来加载jQuery的本地副本:

The HTML5 Boilerplate uses a script for loading a local copy of jQuery if, for whatever reason, the Google CDN version fails to load:

<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字体执行类似的操作?含义:如果远程字体加载失败,请使用存储在服务器上的字体的本地副本。

Is it possible to do something like this with Google Web Fonts? Meaning: if the remote font fails to load, use a local copy of the font stored on your server instead.

推荐答案

我我刚来到此页面后,就遇到了这个问题并想到了解决方案:

I've just had this problem and thought of a solution just after I came to this page:

@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),然后将其放入字体族样式列表中。

So I wanted to use the Ubuntu font, however our website is run on a localhost and won't necessarily be connected to the internet. I created some @font-face declarations to the Ubuntu font, called it something else ("UbuntuFallback") and just put it in the font-family style list.

Voilá !

这篇关于Google Web字体的本地回退的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆