javascript - 仅加载需要的 Google Web 字体的最佳方式是什么？

Question

我必须为网站设置一个简单的新闻博客风格的首页。 CKEditor正在编辑内容。

According to this question我设法可以在编辑器中选择多种 Google Web 字体。

现在的问题是，我必须将这些字体也加载到首页中。但我不知道到底使用了哪些字体。加载所有这些似乎有点夸张，如果只是例如无论如何正在使用三种字体。但随着内容的变化，我无法确定字体。

有没有办法知道需要哪些字体，然后只将它们导入首页？

如果这不可能...

将所有这些字体加载到首页的最佳方法是什么？

Answer 1

首先，此解决方案假设您使用的是 CKEditor 的 Google Web 字体插件:http://ckeditor.com/addon/ckeditor-gwf-plugin

您可以订阅 CKEditor 更改，然后解析生成的 html 以获取 google 字体系列。这是一个使用插件页面中的基本示例的示例:

var editor = CKEDITOR.replace( 'editor1',{
    toolbar: [
        ['Font', 'FontSize']
    ],
            startupFocus: true,
            fillEmptyBlocks: false,
            autoParagraph: false,
            resize_enabled: false
});

editor.on('change', function(event){
    console.log(event.editor.getData());
});

对于示例输入，我为不同的文本片段选择了两种网络字体，它输出以下内容作为 html 字符串:

<span style="font-family:actor;">Hello world</span> <span style="font-family:allerta stencil;">It&#39;s nice to meet you.&nbsp;</span>
<link href="https://fonts.googleapis.com/css?family=Actor" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Allerta Stencil" rel="stylesheet" type="text/css" />

值得注意的是，数据似乎已经包含指向正在使用的字体系列的必要链接 但是，可以很容易地解析该 html 字符串以获取 ['Actor', 'Allerta Stencil']，以持久保存并动态加载在 Web Font Loader 加载的首页上。这是一个从输出字符串返回字体系列名称数组的 fiddle :https://jsfiddle.net/v4tnynu2/

查看 Google 和 Typekit 的 Web 字体加载器:https://developers.google.com/fonts/docs/webfont_loader

它允许您在页面加载后动态加载网络字体:

WebFont.load({
    google: { 
        families: ['Actor', 'Allerta Stencil'] 
    } 
});