4

web fontsによって提供される動的リストをロードGoogle Web Fonts serviceし、次のように選択リストに配置しました。

$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI", 
     {}, function (data) {
     $.each(data.items, function (index, value) {
        $('#fonts').append($("<option></option>")
                   .attr("value", value.family)
                   .text(value.family);
    });

今私が欲しいのはfont、ユーザーが選択リストからそれを選択したときにそれぞれをロードすることです、そしてこれのために私は試しました：

$("#fonts").live({ change: function () { 
    $.get("http://fonts.googleapis.com/css?family=" + $(this).val(), {}, 
    function () { alert("font loaded"); }); } });

しかし、残念ながらこれは機能していません。誰かが私を助けてくれますか？

4

1 に答える 1

2

2番目のgetリクエストは、Webフォントをロードするために必要なCSSを返すだけです。

それをページに埋め込むか、Googleスタイルをロードするリンクタグをページコンテンツに簡単に追加する必要があります。

次に、使用する場所にフォントファミリを設定する必要があります...

そんな感じ：

$("#fonts").live('change', function () { 

    $('body').append("<link rel='stylesheet' id='colorbox-css'  href='http://fonts.googleapis.com/css?family=" + escape($(this).val()) +"' type='text/css' media='all' />");

    $('body').css({'font-family':'"'+$(this).val()+'"'})

});



$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI",  {}, function (data) {

    $.each(data.items, function (index, value) {
            $('#fonts').append($("<option></option>")
                    .attr("value", value.family)
                    .text(value.family));
                    });


});

注：escapeURLエンコードが必要な場合に備えて、URLを生成するためにも使用されます

于 2012-06-15T07:23:56.270 に答える