Local Запасной для Google Web Fonts

Question

HTML5, Boilerplate использует скрипт для загрузки локальной копии JQuery, если по какой-либо причине, версия Google CDN не загружается:

<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

Если вы загрузите все необходимые веб-сайты и сохраните их, например. в локальном файле 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> 

Примечание: Это предполагает, что КДС-х fonts.googleapis.com и ajax.googleapis.com неудачу в то же время ..

Answer 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, однако наш веб-сайт запускается на локальном хосте, и выиграл» t обязательно подключаться к Интернету. Я создал некоторые @ font-face объявления для шрифта Ubuntu, назвал его чем-то другим («UbuntuFallback») и просто поместил его в список стиля шрифта.

Voilá!

Answer 3

Клиентский запасной вариант вызова файл 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);