2012-07-20 14 views
5

Google font-aileleri ismini belirli bir listeye yüklüyorum. Kullanıcı listeden herhangi bir font-aile seçtiğinde, o yazı tipini dinamik olarak yüklerim. Benim kodum:Google font preview nasıl gösteriliyor

$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=...", {}, function (data) { 
    $.each(data.items, function (index, value) { 
     $('#fc').append($("<option></option>").attr("value", value.family) 
       .text(value.family)); 
    }); 
    $('#fc').selectmenu({ select: function() { 
     $('body').append("<link rel='stylesheet' id='colorbox-css' href='http://fonts.googleapis.com/css?family=" + escape($(this).selectmenu("value")) + "' type='text/css' media='all' />"); 
    } 
    }); 
}); 

Şimdi bu yazı tipini yüklemeden önce yazı tipinin önizlemesini kullanıcıya göstermek istiyorum.

Bu mümkün mü?

cevap

1

Yazı tiplerini sayfanıza described here olarak yükleyebilirsiniz. Ardından, örnek metninizle bir div kullanın ve açılır menüden seçilen yazı tipine göre stil verin.

Özellikle olay işleyicileri ekleyerek son bölümüne bakmak - Eğer yazı (lar) yükleme bittiğinde algılamak ve bu github proje akla gelen

+0

Teşekkürler, Ancak, bu şekilde, kullanıcı fontu her seçtiğinizde, font yüklenir ve önizleme görüldüğünde göründüğünde kullanıcı bu yazı tipini kullanmak istemezse, bu yazı tipini gereksiz yere yükledik demektir. Bu maliyetli bir yaklaşım mı? –

+0

En alt satırda, bir yazıyı yüklemeden gösteremeyeceğinizden - Sadece sayfa ömrü boyunca yüklenecek. Kullanıcı bir yazı tipi seçtiğinde, yalnızca seçtikleri birini saklarsınız ve içeriği yeniden görüntülerken yalnızca onu yüklersiniz. Tek alternatif, a) yazı tipini bir sunucuda bir yere yüklemek, bir görüntüyü onunla oluşturmak ve ardından bu görüntüyü kullanıcıya göndermek olacaktır. Yük yine de oluyor ama kullanıcı için değil. b) tüm olası yazı tiplerini temsil eden görüntüleri önceden render edin. Bu, yenileri eklendikçe, seçenek a'dan daha hızlı kullanıldığında daha hızlı bir ağrı olacaktır. – Basic

1

onları uygun şekilde uygulamak için JS kullanabilirsiniz. Aynı zamanda, kullanıcı bir google fontunun bir önizlemesini sunmaktadır Fontselect jQuery Plugin

2

HiGoogleFonts'u deneyin. Tüm google yazı tiplerini, her birinin önizlemesini içeren bir açılır menüde gösterir. Sadece seçilen yazı tipini yükler. Yazı tipi önizleme için tek bir görüntü kullanır.

Kendimi meydan bu koştu