如何显示Google字体预览

时间:2012-07-20 10:18:07

标签: javascript jquery

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

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

这可能吗?

5 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

的预览

答案 3 :(得分:1)

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

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

答案 4 :(得分:0)

我最近在添加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