h2元素无法切换Art Dystopia字体，添加!important后内容消失

问题概述 #

尝试将h2元素字体改为Art Dystopia以匹配页面标题，但字体始终不生效；添加!important声明后h2内容直接消失；将Jolly Lodger字体规则从body移至paragraph1/paragraph2类选择器，问题仍未解决。

代码问题分析 #

1. HTML结构错误
   • <head>内的<style>标签未闭合，且</style>被错误放置在</head>之后，导致CSS解析异常
   • Jolly Lodger字体的<link>标签被放在<body>内部的div中，不符合规范，浏览器可能无法正确加载字体
   • 缺少</html>闭合标签，页面结构不完整
2. CSS语法问题
   • h2规则中color: white末尾未加分号，虽然浏览器通常容错，但添加!important后可能触发解析错误，导致元素渲染失败
   • figcaption重复定义font-size，属于冗余代码
   • .divider的margin-bottom: -5缺少单位，可能导致布局异常

修复方案 #

步骤1：修正HTML结构 #

• 将所有字体加载的<link>标签移至<head>内
• 闭合所有未正确关闭的标签（<style>、<html>）

步骤2：修正CSS语法 #

• 补全h2规则末尾的分号
• 清理figcaption冗余的font-size定义
• 为.divider的margin-bottom补充单位

修复后的完整代码 #

HTML代码

<html>
   <head>
      <link href="https://fonts.cdnfonts.com/css/art-dystopia" rel="stylesheet">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jolly+Lodger">
      <style>
         body {
            background: url(https://64.media.tumblr.com/998b664cb9fd89a155b3b105dbdc9a09/808262fefad64e38-9c/s500x750/5f09d008c448b11092d119bf69d0751e08d79631.gif);
            background-size: cover;
            color: gray;
         }

         figcaption {
            color: gray;
            font: italic bold large Times New Roman;
            margin-right: 350px;
            margin-bottom: -30px;
            font-size: 20px;
            -webkit-text-stroke: 1px black;
         }

         main {
            width: 700px;
            padding: 50px;
            margin-top: 10px;
            border-radius: 25px;
            background: url(https://64.media.tumblr.com/3eb3a0cfd36a1c89606ecbc5364b342a/9ed37a3660fcc25d-7a/s1280x1920/9e6cd20a45ee6f5d53ccf37266b9cfede1bb33ae.jpg);
            background-position: left top;
            background-repeat: repeat;
         }

         h1 {
            margin-top: 75px;
            margin-bottom: -20px;
            font-size: 50px;
            font-family: "Art Dystopia";
            color: white;
         }

         h2 {
            font-size: 40px;
            font-family: "Art Dystopia";
            color: white;
         }

         p {
            font-size: 22.3px;
         }

         .paragraph1 {
            -webkit-text-stroke: 1px black;
            text-align: right;
            margin-bottom: 20px;
            font-family: "Jolly Lodger", serif;
         }

         .paragraph2 {
            text-align: center;
            -webkit-text-stroke: 1px black;
            font-family: "Jolly Lodger", serif;
         }

         img {
            margin-left: -20px;
            margin-right: auto;
            margin-bottom: -20px;
            margin-top: -120px;
            display: block;
         }

         .divider {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: -5px;
            margin-top: 30px;
            width: 400px;
            display: block;
         }
      </style>
   </head>
   <body>
      <div id="banner">
         <center>
         <figure>
            <h1>TOMBROT</h1>
            <figcaption>welcome to the webpage of...</figcaption>
         </figure>
         <main>
            <p class="paragraph1">
               hi there, welcome to the internet mausoleum.
               <br>
               it may be cold and dark, but i hope you are able to enjoy your stay nonetheless.
            </p>
            <img src="https://files.catbox.moe/aezv2r.gif">
            <img src="https://64.media.tumblr.com/b8a2b38e67cbb806e22cdbb1af5064e8/65964bf138f6b00c-d2/s2048x3072/ec10b4718c3caeed50d40e45014f6ece8aa3f9e3.pnj" class="divider">
            <p class="paragraph2">
               i've been wanting to have my own website for a while now. as someone who is interested in making online friends (and tends to be averse to public social media usage), i hope this can be an outlet to do such while also displaying my own personality and creativity. have fun peeking around!
            </p>
            <h2>news</h2>
         </main>
         </center>
      </div>
   </body>
</html>

验证结果 #

修复后，h2元素将正确显示Art Dystopia字体，不会出现内容消失的情况；paragraph1和paragraph2也能正常加载Jolly Lodger字体，页面布局恢复正常。

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