如何显示 Google 字体预览

我正在将 Google 字体系列名称加载到选择列表中。当用户从列表中选择任何字体系列时，我会动态加载该字体。我的代码：

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

现在我想在加载该字体之前向用户显示该字体的预览。

这可能吗？

我自己也遇到了这个挑战，因此使用了一些控制台操作并开源了以下内容：https://github.com/onassar/GoogleWebFonts-FontFamilyPreviewImages https://github.com/onassar/GoogleWebFonts-FontFamilyPreviewImages

我将非常积极地维护它（现在只需写文档）。