如何加载谷歌字体？

Question

我加载了由Google Web Fonts服务提供的动态列表，并将其放置在选择列表中，如下所示：

：

$.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"); }); } });

很不幸，这并没有起作用。请问有人能帮我吗？

- King Kong

---

字体未应用，因为它们在获取请求时未加载。 - King Kong

是的，“google-app-engine”以“google”开头。然而，它与你的问题只有这一点相似。 - Nick Johnson

Answer 1

第二个GET请求只是返回所需的CSS以加载Web字体。

您应该将其嵌入页面，或者更简单地在页面内容中添加链接标记，以加载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));
                    });


});

注意：`escape`也被用于生成URL，以防需要进行URL编码。

- Ben