我正在将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' />");
}
});
});
现在我想在加载该字体之前向用户显示字体预览。
这可能吗?
答案 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