仅加载所需的 Google 网络字体的最佳方式是什么？答案

【问题标题】：What is the best way to load only needed Google Web Fonts?仅加载所需的 Google 网络字体的最佳方式是什么？
【发布时间】：2015-10-03 11:03:03
【问题描述】：

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

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

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

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

如果这是不可能的......

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

【问题讨论】：

您是说编辑器可以选择更改正在编辑的文本的字体，但您只想加载使用的字体？（即如果在编辑器中没有改变字体，只加载默认字体）
是的，应该可以。因此，当我使用三种字体时，它应该加载这三种字体，而不是 超过 9000 个字体的整个包。
我不知道为什么有人投了反对票，这对我来说似乎是个好问题。

标签： javascript html css ckeditor google-webfonts

【解决方案1】：

首先，此解决方案假定您使用的是 CKEditor 的 Google Web Font 插件：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());
});

对于一个示例输入，我为不同的文本选择了两种网络字体，它将以下内容输出为 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 Font Loader：https://developers.google.com/fonts/docs/webfont_loader

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

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

【讨论】：

此解决方案如何确定使用了哪些字体并避免加载未使用的字体？
也看不到。至少它会通过在页面加载后加载字体来增加加载时间。（这将有助于我解决问题的第二种选择。）
我正在考虑订阅 CKEditor 更改事件以解析正在使用的 google 网络字体的数据：docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change。然后，您可以保留家庭列表并将它们加载到首页。
我更新了我的解决方案，以展示如何更新当前使用的谷歌网络字体的动态列表。如果您不知道如何解析 html 字符串以获取家庭数组，请告诉我，我会发布一个小提琴。
我用小提琴更新了解决方案，用于解析字体系列的 CKEditor 输出数据。

【解决方案2】：

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

使用 JavaScript 在 HTML 文档中搜索编辑器用来更改字体系列的任何内容，无论是像 font-family: Whatever; 这样的内联样式还是像 <span class="otherfont">...</span> 这样的 CSS 类。然后用JS加载需要的字体。
跟踪后端使用的字体。这可能涉及修改编辑器，以便在保存时将哪些字体存储到数据库中，然后您的 CMS 模板会在包含字体之前检查特定页面上是否使用了字体。

【讨论】：