iframe内CSS字体未正常加载的问题排查求助

我开发了一个基础HTML预览编辑器，输入指定HTML代码并点击预览按钮后，iframe里的CSS font-family 无法正常加载，实际显示字体和预期不符。

需粘贴到编辑器的原代码： #

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<body style="height: auto; overflow: hidden; padding: 16px; --devsite-panel-height:0px;" ready="">
    <meta name="suppress_site_styles" content="true"><meta name="auto_height" content="true"><meta name="auto_width" content="true">
      <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
      <h1>Titles and headers</h1>
      <b>Bold text</b><br>
      Normal text<br>
      <a href="">Links</a><br>
      <span class="current">Current navigation selection</span><br>
      <span class="error">Form input errors</span><br>
      <span class="gray">Gray text</span><br>
      <span class="secondary">Secondary text</span><br>
      
  
</body>

编辑器完整代码： #

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/somethinggoodone/cdn/AniketPradhan_bootstrap.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<head>
    <style>
    .stool {
        cursor: pointer;
        user-select: none;
        text-transform: uppercase;
        z-index: 999;

    }
    </style>
</head>

<body class="p-3">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container position-relative border">
        <div class="toolbar mt-3">
            <small id="showpreview" class="bg-light border border-secondary stool position-absolute top-0 end-0 px-2">
                Preview
            </small>
            <small id="showhtml" class="bg-light border border-secondary stool position-absolute top-0 end-0 px-2" style="display:none">
                HTML
            </small>
        </div>
        <div>
            <textarea id="embody" class="m-0 p-0 border-0 mt-2" style="width:100%;resize: none;outline: none">&lt;h3&gt;Compose your email body text.&lt;/h3&gt;</textarea>

            <iframe src="javascript:void(0);" id="embody-preview" style="width:100%;">

            </iframe>
        </div>
    </div>

    <script type="text/javascript">
    $("#showpreview").click(function() {
        $(this).hide();
        $("#embody-preview").contents().find('html').html(embody.value)
        $("#showhtml,#embody-preview").show();
        $("#embody").hide();
    });
    $("#showhtml").click(function() {
        $(this).hide();
        $("#showpreview,#embody").show();
        $("#embody-preview").hide();
    });    
    </script>
</body>
</html>

问题原因 #

1. HTML结构不规范：粘贴的代码中<link>样式表标签直接放在<body>外，且<meta>标签被嵌套在<body>内部，不符合HTML标准结构。浏览器解析时无法正确识别这些头部资源，导致样式表加载失败。
2. 重复引入样式表：代码中两次引入了同一个CSS文件，属于冗余操作，且位置错误加剧了解析问题。

解决方案 #

1. 修正粘贴的HTML代码结构

将<meta>和<link>标签移到<head>内，确保HTML结构符合标准：

<html>
<head>
    <meta name="suppress_site_styles" content="true">
    <meta name="auto_height" content="true">
    <meta name="auto_width" content="true">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body style="height: auto; overflow: hidden; padding: 16px; --devsite-panel-height:0px;" ready="">
    <h1>Titles and headers</h1>
    <b>Bold text</b><br>
    Normal text<br>
    <a href="">Links</a><br>
    <span class="current">Current navigation selection</span><br>
    <span class="error">Form input errors</span><br>
    <span class="gray">Gray text</span><br>
    <span class="secondary">Secondary text</span><br>
</body>
</html>

2. 优化编辑器预览逻辑（可选）

如果希望编辑器能自动处理不规范的HTML结构，可以修改预览脚本，自动补全<head>和<body>标签，避免因用户输入结构错误导致样式失效：

$("#showpreview").click(function() {
    $(this).hide();
    let userHtml = embody.value;
    // 检查是否包含完整的html结构，若没有则自动补全
    if (!userHtml.includes('<html>') && !userHtml.includes('<head>')) {
        userHtml = `<html><head></head><body>${userHtml}</body></html>`;
        // 提取link和meta标签移到head中
        const tempDiv = $('<div>').html(userHtml);
        tempDiv.find('link').appendTo(tempDiv.find('head'));
        tempDiv.find('meta').appendTo(tempDiv.find('head'));
        userHtml = tempDiv.html();
    }
    $("#embody-preview").contents().find('html').html(userHtml)
    $("#showhtml,#embody-preview").show();
    $("#embody").hide();
});

内容的提问来源于stack exchange，提问作者Code Guy