如何在 iframe 中应用 Google Web 字体加载器

Question

我正在编写一段动态加载 Google 字体的代码。

该页面的某些内容加载到 iframe 中（在同一域源上）。我正在努力加载和应用 iframe 中的 Web 字体。我可以访问父文档和 iframe。这是我的代码：

<h1>FONT to test</h1>
<p>Another FONT to test</p>

<iframe src="iframe-content.html"></iframe>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

<script>
    WebFont.load({
        google: {
            families: [ 'Abel' ]
        },

        fontactive: function() {
            $('h1').css('font-family', 'Abel');
        }
    });
</script>

这里是 iframe 内容代码：

<h1>IFRAME FONT to test</h1>
<p>IFRAME Another FONT to test</p>

我尝试使用此处概述的 "context" 变量： https://github.com/typekit/webfontloader

但我没能成功。

提前致谢！

Answer 1

iframe 本质上是它自己的页面，因此它不能从 iframe 标记所在的页面继承任何内容。

如果您将样式代码添加到 iframe-content.html，它应该可以工作。这是一个例子：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<h1>IFRAME FONT to test</h1>
<p>IFRAME Another FONT to test</p>
<script>
    WebFont.load({
        google: {
            families: [ 'Abel' ]
        },

        fontactive: function() {
            $('h1').css('font-family', 'Abel');
        }
    });
</script>

Answer 2

我自己设法找到了这个。

WebFont.load({
    google: {
        families: [ 'Abel' ]
    },
    context: window.frames[0].frameElement.contentWindow,
}

这将在 iframe 内加载文档中的字体。

如何在 iframe 中应用 Google Web 字体加载器

How to apply Google Web Font Loader within an iframe

javascript

iframe

jquery

google-webfonts

webfont-loader