Question

我正在尝试在网站加载时弹出警报消息（如何玩游戏），并使用“ 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>

Answer 1

只需替换“＆times;”到“ 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>

警报消息关闭按钮

2 个答案: