Question

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

According to this question我管理过可以在编辑器中选择多个Google网络字体。

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

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

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

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

Answer 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字符串很容易被解析得到，[＆＃39;演员＆＃39;，＆＃ 39; Allerta Stencil＆＃39;]，通过Web Font Loader动态加载和加载FrontPage加载。这是一个小提琴，它从输出字符串中返回一系列字体系列名称：https://jsfiddle.net/v4tnynu2/

通过Google和Typekit检查Web Font Loader：https://developers.google.com/fonts/docs/webfont_loader

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

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

Answer 2

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

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

只加载所需的Google Web字体的最佳方法是什么？

2 个答案: