javascript – 如何加载谷歌字体？

2023年5月30日 178次阅读

我加载了Google Web Fonts服务提供的动态Web字体列表,并将其放在选择列表中,如：

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

现在我想要的是当用户从选择列表中选择它时加载每个字体,为此我试过：

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

但不幸的是,这是不行的可以任何人请帮帮我吗？

最佳答案 第二个get请求只返回加载webfont所需的CSS.

您应该将其嵌入页面,或者更轻松地将链接标记添加到将加载Google样式的页面内容.

然后你还需要在任何地方设置font-family …

像这样的东西：

$("#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编码

点赞