警报消息关闭按钮答案

【问题标题】：Alert Message close button警报消息关闭按钮
【发布时间】：2020-09-11 07:52:15
【问题描述】：

我试图在网站加载时弹出一条警告消息（如何玩游戏），并有一个“x”按钮来关闭它。有趣的是，当字体系列是“Courier”等其他东西时，按钮是可见的，但我的游戏是哈利波特主题，我想使用一种特殊的字体，它似乎总是以某种方式“隐藏”按钮.我想知道是否有办法使用“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>

【问题讨论】：

标签： javascript html css web fonts

【解决方案1】：

只需替换“&times ;”到“x”

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

【讨论】：

【解决方案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>

【讨论】：