字体系列 iFrame 正文答案

【问题标题】：Font-family iFrame body字体系列 iFrame 正文
【发布时间】：2017-03-18 05:54:10
【问题描述】：

我在 body 标记中有一个 iFrame，如下所示：

<body onLoad="iFrameOn();">
    <iframe name="richTextField" id="richTextField" style="border:#000 1px solid; width:700px; height:300px;"></iframe>
</body>

javascript iFrameOn 看起来像这样：

function iFrameOn() {
    richTextField.document.designMode = 'On';
    richTextField.document.body.style.fontFamily = "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

不幸的是，字体没有更改为我告诉它更改的字体。来自 javascript 的错误控制台显示：“Helvetica 未定义（...）”。我该如何解决这个问题，所以 iFrame 中的字体是我声明的字体？

提前致谢！

【问题讨论】：

标签： javascript html css iframe font-family

【解决方案1】：

你可以试试下面的代码：

richTextField.contentDocument.body.style.fontFamily = '-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif';

【讨论】：

【解决方案2】：

你可以改变你的 ifram 风格；使用此代码为其添加字体；这对我有用:)

var myframe = $('#iframeId');
var myframStyle = myframe[0].contentWindow.document.children[0].children[0].getElementsByTagName('style');
var myframeStyleContent = myframe[0].contentWindow.document.children[0].children[0].getElementsByTagName('style')[0].innerHTML;
var myfontFace = "@font-face {font-family: your-fontname; font-style: normal;font-weight: 400;src: url('your web font url') format('woff2');} body {font-family:your-fontname;}"; 
myframeStyleContent += myfontFace;
myframe[0].contentWindow.document.children[0].children[0].getElementsByTagName('style')[0].innerHTML = myframeStyleContent;

【讨论】：

【解决方案3】：

您应该将它们设置为一个字符串，

richTextField.document.body.style.fontFamily = 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif';

【讨论】：

就是这么简单。我现在觉得很傻。谢谢。我会在 10 分钟内将其标记为答案。 Stackoverflow 的东西...