12

HTML5 ボイラープレートは、何らかの理由で Google CDN バージョンの読み込みに失敗した場合に、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 でこのようなことを行うことは可能ですか? 意味: リモート フォントの読み込みに失敗した場合は、代わりにサーバーに保存されているフォントのローカル コピーを使用してください。

4

3 に答える 3

21

私はちょうどこの問題を抱えていて、このページに来た直後に解決策を考えました:

@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 フォントを使用したかったのですが、私たちの Web サイトはローカルホストで実行されており、必ずしもインターネットに接続されているとは限りません。Ubuntu フォントに @font-face 宣言をいくつか作成し、それを別のもの (「UbuntuFallback」) と呼び、font-family スタイル リストに入れました。

出来上がり！

于 2014-03-05T11:50:12.603 に答える
0

異なるフォントの呼び出しを含む css ファイルを呼び出すクライアント側のフォールバック (ここでは Tangerine フォント): 

(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);
于 2015-06-26T09:43:14.100 に答える