如何显示Google字体预览

Question

我正在将Google字体系列名称加载到选择列表中.当用户从列表中选择任何font-family时,我会动态加载该字体.我的代码:

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

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

这可能吗？

Answer 1

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

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

Answer 2

您可以按照此处所述将字体加载到页面中。然后只需将示例文本放在一个 div 中，并根据从下拉列表中选择的字体设置其样式即可。

具体看一下关于添加事件处理程序的最后一节 - 您可以使用 JS 来检测字体何时完成加载并根据需要应用它们