某些 Google 字体不适用于 iFrame innerHTML

Posted 2023-03-07

【中文标题】某些 Google 字体不适用于 iFrame innerHTML

【英文标题】：Some Google Fonts don't work on iFrame innerHTML

【发布时间】：2022-01-03 03:02:01

【问题描述】：

真的很奇怪，但是我的 iFrame innerhtml 不接受某些字体。

这是我的代码示例：

此字体有效：

头：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter&display=swap" rel="stylesheet">

主体：

<iframe id="textBox" name="richTextFeld"></iframe>
<script type="text/javascript">
    function onLoad() 
        richTextFeld.document.designMode = 'On';
        richTextFeld.document.body.style.fontFamily = "'Comforter', cursive";
        richTextFeld.document.body.style.fontSize = "16px";
        richTextFeld.document.body.style.color = "#ff0000";
        richTextFeld.document.body.innerHTML = "Some Text";
    
</script>

而且这个字体不起作用（我已经用两个**标记了两个不同之处）：

头：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
**<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">**

主体：

<iframe id="textBox" name="richTextFeld"></iframe>
<script type="text/javascript">
    function onLoad() 
        richTextFeld.document.designMode = 'On';
        **richTextFeld.document.body.style.fontFamily = "'Raleway', sans-serif";**
        richTextFeld.document.body.style.fontSize = "16px";
        richTextFeld.document.body.style.color = "#ff0000";
        richTextFeld.document.body.innerHTML = "Some Text";
    
</script>

我真的不明白为什么下面的字体不起作用，你有什么想法吗？

编辑：在检查器中 Raleway 显示为字体，但网站上显示的字体不同（见下图）。 Image

【问题讨论】：

浏览器控制台是否输出错误？您必须先获取元素：document.getElementById('textBox')。见getElementById

【参考方案1】：

以下是更改字体的方法：

<iframe id="textBox" name="iFrameName"></iframe>

导入字体：

iFrameName.document.body.innerHTML = "<style>@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');*font-family:'Raleway',sans-serif;</style>Some Text";

使用已安装的字体：

iFrameName.document.body.fontFamily = "Arial";