如何在一个iframe中应用谷歌的Web字体装载机

问题描述 投票:0回答:2

我工作一段代码,动态加载谷歌字体。

一些页面的内容是一个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>

我尝试使用“背景”变量概述这里:https://github.com/typekit/webfontloader

但我没有管理,使其工作。

提前致谢!

javascript jquery iframe google-webfonts webfont-loader
2个回答
0
投票

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>

0
投票

我设法找到了这个自己。

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

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

热门问题
推荐问题
最新问题