dự phòng địa phương cho Google Web Fonts

Question

HTML5 Boilerplate sử dụng một kịch bản cho tải một bản sao cục bộ của jQuery nếu vì bất cứ lý do gì, các phiên bản Google CDN không tải:

<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> 

Có thể làm điều gì đó như điều này với Google Web Fonts? Có nghĩa là: nếu phông chữ từ xa không tải được, hãy sử dụng bản sao cục bộ của phông chữ được lưu trữ trên máy chủ của bạn thay thế.

Answer 1

Nếu bạn tải xuống tất cả các webfont cần thiết và lưu trữ nó, ví dụ: trong một tập tin địa phương Webfonts.css bạn có thể làm một cái gì đó như thế này:

<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> 

Lưu ý: này được giả định rằng của cdn fonts.googleapis.com và ajax.googleapis.com thất bại cùng một lúc ..

Answer 2

tôi vừa mới có vấn đề này và nghĩ đến một giải pháp chỉ sau khi tôi đã vào trang này:

@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; 
} 

Vì vậy, tôi muốn sử dụng phông chữ Ubuntu, tuy nhiên website của chúng tôi được chạy trên một localhost và chiến thắng' t nhất thiết phải được kết nối với internet. Tôi đã tạo một số khai báo phông chữ @ cho phông chữ Ubuntu, được gọi là một cái gì đó khác ("UbuntuFallback") và chỉ cần đặt nó trong danh sách kiểu phông chữ gia đình.

Voilá!

Answer 3

Một fallback client-side gọi một file css chứa các cuộc gọi phông chữ khác nhau (ở đây Tangerine font):

(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);