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

尝试 HiGoogleFonts 。它会在下拉列表中显示所有谷歌字体，并预览每个字体。它只加载选中的字体。它使用单个图像进行字体预览。

Answer 2

您可以将字体加载到页面中described here。然后只需要一个包含示例文本的div，并根据从下拉列表中选择的字体设置样式。

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

Answer 3

这个github项目浮现在脑海中。它还为用户提供了谷歌字体Fontselect jQuery Plugin

的预览

Answer 4

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

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

Answer 5

我最近在添加Google字体API功能以不断更新当前可用的Google字体选择列表时亲自解决了此问题。我以jQuery Fontselect Plugin为基础，但是我做了很多修改以适应我的目的。我在这里说明如何解决：https://www.bibleget.io/2020/04/released-v5-3-of-the-wordpress-plugin/ 基本上，我对Google字体API使用了一些复杂的cURL请求，以便在本地下载每个字体的简化版本，其中仅包含用于字体名称的字符，然后将这些简化版本的字体预先加载到具有选择下拉菜单的页面。您可以在这里查看它的运行情况：https://youtu.be/zqJqU_5UZ5M

如何显示Google字体预览

5 个答案: