字体系列 iFrame 正文

Question

我在正文标签内有一个 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 is not defined(...)"。我该如何解决这个问题，使 iFrame 中的字体是我声明的字体？

提前致谢！

Answer 1

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

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

Answer 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;

Answer 3

您可以尝试使用以下代码：

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

字体系列 iFrame 正文

Font-family iFrame body

html

javascript

css

iframe

font-family