Javascript 加载只需要的Google Web字体的最佳方式是什么？

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

我已经设法在编辑器中选择了几种谷歌网页字体

现在的问题是，我必须将这些字体也加载到frontpage中。但我不知道用的是哪种字体。如果只使用其中三种字体，加载所有字体似乎有点夸张。但是随着内容的变化，我不能确定字体

是否有办法知道需要哪些字体，然后只将其导入frontpage？

如果这不可能的话

---

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

首先，此解决方案假设您正在使用适用于CKEditor的Google Web字体插件：

您可以订阅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" />

---

我不知道您的设置是什么样的，但我可以想到两个选项：

使用JavaScript在HTML文档中搜索编辑器用于更改字体系列的任何内容，无论它是否为内联样式，例如

font-family:whatever

或类似于

…

的CSS类。然后用JS加载所需的字体

跟踪后端使用的字体。这可能涉及修改编辑器，以便在保存时，它存储数据库使用的字体，然后您的CMS模板将在包含字体之前检查特定页面上是否使用了字体

---

您是说编辑器有一个选项可以更改正在编辑的文本的字体，但您只想加载所使用的字体？（即，如果编辑器中的字体没有更改，则只加载默认字体）是的，应该可以。所以，当我使用三种字体时，它应该加载这三种字体，而不是整个9000多种字体。我不知道为什么有人否决了这一点，这对我来说似乎是个好问题。这个解决方案如何确定使用了哪些字体并避免加载不使用的字体？我也看不到这一点。至少在页面加载后加载字体会增加加载时间。（这将有助于我解决问题的第二个选择。）我正在考虑订阅CKEditor更改事件，以解析正在使用的google web字体的数据：。然后，您可以保留族列表并将其加载到首页。我更新了我的解决方案，以显示如何更新当前使用的google web字体的动态列表。如果您不知道如何解析html字符串以获取族数组，请告诉我，我将发布一个fiddle。我用一个fiddle更新了解决方案，用于解析字体族的CKEditor输出数据。

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