5

我正在将 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' />");
    }
    });
});

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

这可能吗？

4

5 回答 5

6

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

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

于 2016-12-30T01:37:35.693 回答
2

试试HiGoogleFonts。它在下拉列表中显示所有 google 字体，并提供每种字体的预览。它只加载被选中的字体。它使用单个图像进行字体预览。

于 2016-08-07T06:43:21.690 回答
1

您可以按照此处所述将字体加载到您的页面中。然后只需使用带有示例文本的 div 并根据从下拉列表中选择的字体对其进行样式设置。

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

于 2012-07-20T13:27:34.633 回答
1

想到了这个 github 项目。它还为用户提供了谷歌字体的预览Fontselect jQuery 插件

于 2013-03-05T08:29:36.903 回答
1

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

于 2020-04-09T14:32:06.980 回答