警报消息关闭按钮

Question

我试图在网站加载时弹出一条警告消息（如何玩游戏），并使用 "x" 按钮关闭它。有趣的是，当 font-family 是 "Courier" 等其他东西时，按钮是可见的，但我的游戏是哈利波特主题，我想使用一种特殊的字体，它似乎总是以某种方式 "hide" 按钮。我想知道是否有办法使用 "HarryPotter7" 字体并显示我的 "x" 按钮。任何帮助将不胜感激！

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  color: #6e2c60;
}

@font-face {
  font-family: 'Harry P';
  src: url('http://www.fontsaddict.com/fontface/harry-p.TTF');
}

@font-face {
  font-family: 'HarryPotter7';
  src: url('http://www.fontsaddict.com/fontface/harrypotter7.ttf');
}

   <style>
      .alert 
      {
        font-family: "HarryPotter7"; 
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.52);
        color: purple;
      }

      .closebtn 
      {
        margin-left: 15px;
        color: black;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }

      .closebtn:hover 
      {
        color: red;
      }
  </style>
  
 <body>   
   <div class="alert">
      <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
      <strong style="font-size: 150%">How to Play:</strong> 
      <br> ✥ Type the full name and then hit enter or click on the "CHECK" button.
      <br> ✥ The system is case insensitive, but the spelling must be right! Start and pause the timer as you want, or reset the entire game with the reset button. 
      <br> ✥ If time is up, the page will automatically reload to the scores page, or, you can click on "Finish Game" button towards the bottom.
    </div>
  </body>

Answer 1

只需替换“× ;”至 "x"

<span class="closebtn" onclick="this.parentElement.style.display='none';">x</span>

Answer 2

如果您愿意，您只需使用 × 或图标。

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  color: #6e2c60;
}

@font-face {
  font-family: 'Harry P';
  src: url('http://www.fontsaddict.com/fontface/harry-p.TTF');
}

@font-face {
  font-family: 'HarryPotter7';
  src: url('http://www.fontsaddict.com/fontface/harrypotter7.ttf');
}

   <style>
      .alert 
      {
        font-family: "HarryPotter7"; 
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.52);
        color: purple;
      }

      .closebtn 
      {
        margin-left: 15px;
        color: black;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }

      .closebtn:hover 
      {
        color: red;
      }
  </style>
  
 <body>   
   <div class="alert">
      <span class="closebtn" onclick="this.parentElement.style.display='none';">× </span> 
      <strong style="font-size: 150%">How to Play:</strong> 
      <br> ✥ Type the full name and then hit enter or click on the "CHECK" button.
      <br> ✥ The system is case insensitive, but the spelling must be right! Start and pause the timer as you want, or reset the entire game with the reset button. 
      <br> ✥ If time is up, the page will automatically reload to the scores page, or, you can click on "Finish Game" button towards the bottom.
    </div>
  </body>

警报消息关闭按钮

Alert Message close button

html

javascript

css

fonts

web