不知道如何在代码中更改字体

Question

嘿，我正在尝试更改此代码块中所有内容的字体，但我不确定这是如何给出的

<div>
            <iframe 
                id="waitlist_iframe"
                title="waitlist" 
                frameborder="0" 
                marginheight="0" 
                marginwidth="0" 
                width="600px"
                height="400px"
                src="{code}"
                style="border-radius: 8px;"
            >

            </iframe>
  
        </div>

        <script>
            const url = new URL(window.location.href);
            const ref_id = url.searchParams.get('ref_id');
            if (ref_id) {
                document.getElementById("waitlist_iframe").src += `?ref_id=${ref_id}`;
            }

  

        </script>

.container--waitlistapi // outermost div containing the component
.container--waitlistapi > h1 // main heading
.button--waitlistapi // main submit button
.input--waitlistapi // input fields
.statusToggleLabel // "Signed up before?" label
.statusToggleLabel > a // "Check your status" link

当我尝试时没有任何改变

Answer 1

这是一个外部 CSS 选项。 我个人更喜欢尽可能多地使用外部 CSS。 如果您需要 HTML/CSS 基础方面的帮助，请随时给我发消息。

尝试将 class 添加到您的起始 div 标记中。 像这样：

<div class="waitlist--iframe">

然后在您的 .css 文件中，只需指定您要用于 class 的字体，如下所示：

.waitlist--iframe {
         font-family: 'Times New Roman', sans-serif;
     }

只需将“Times New Roman”替换为您想要的任何字体即可。 这样它只将该字体系列分配给该 div 元素（以及您要将 class 添加到的任何其他元素。

Answer 2

选项 1：将字体系列添加为内联样式
选项 2：您已经有 id 选择器 waitlist_iframe。 使用此选择器添加 styles。选项 1：

<iframe 
                id="waitlist_iframe"
                title="waitlist" 
                frameborder="0" 
                marginheight="0" 
                marginwidth="0" 
                width="600px"
                height="400px"
                src="{code}"
                style="border-radius: 8px;font-family: 'Times New Roman', sans-serif;"
            >

            </iframe>