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

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

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

现在的问题是，我还必须将这些字体加载到首页。但是我仍然不知道使用哪种字体。如果仅将它们全部加载似乎有点过分。仍然使用三种字体。但是随着内容的变化，我不确定字体。

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

如果这不可能...

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

最佳答案

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

您可以订阅CKEditor更改，然后为Google字体系列解析结果html。这是使用插件页面中基本示例的示例：

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());
});

对于我为不同文本选择了两种Web字体的示例输入，它将以下内容作为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。这是一个小提琴，它从输出字符串中返回一个字体家族名称数组：https://jsfiddle.net/v4tnynu2/

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

它允许您在页面加载后动态加载Web字体：

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