Javascript 警报消息关闭按钮

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

正文{
字体系列：helvetica、arial、无衬线字体；
边缘：2米；
}
h1{
颜色：#6e2c60；
}
@字体{
字体系列：“哈里P”；
src:url（'http://www.fontsaddict.com/fontface/harry-p.TTF');
}
@字体{
字体系列：“HarryPotter7”；
src:url（'http://www.fontsaddict.com/fontface/harrypotter7.ttf');
}

.警惕
{
字体系列：“HarryPotter7”；
填充：20px；
背景色：rgba（255、255、255、0.52）；
颜色：紫色；
}
.关闭
{
左边距：15px；
颜色：黑色；
字体大小：粗体；
浮动：对；
字体大小：22px；
线高：20px；
光标：指针；
过渡：0.3s；
}
.closebtn:悬停
{
颜色：红色；
}
&时代；
如何播放：

✥ 键入全名，然后按enter键或单击“检查”按钮。

✥ 系统不区分大小写，但拼写必须正确！根据需要启动并暂停计时器，或使用重置按钮重置整个游戏。

✥ 如果时间到了，页面将自动重新加载到分数页面，或者，您可以单击底部的“完成游戏”按钮。

只需将“×；”替换为“x”

---

x

如果选择，只需使用

×

或图标即可

正文{
字体系列：helvetica、arial、无衬线字体；
边缘：2米；
}
h1{
颜色：#6e2c60；
}
@字体{
字体系列：“哈里P”；
src:url（'http://www.fontsaddict.com/fontface/harry-p.TTF');
}
@字体{
字体系列：“HarryPotter7”；
src:url（'http://www.fontsaddict.com/fontface/harrypotter7.ttf');
}

.警惕
{
字体系列：“HarryPotter7”；
填充：20px；
背景色：rgba（255、255、255、0.52）；
颜色：紫色；
}
.关闭
{
左边距：15px；
颜色：黑色；
字体大小：粗体；
浮动：对；
字体大小：22px；
线高：20px；
光标：指针；
过渡：0.3s；
}
.closebtn:悬停
{
颜色：红色；
}
×  
如何播放：

✥ 键入全名，然后按enter键或单击“检查”按钮。

✥ 系统不区分大小写，但拼写必须正确！根据需要启动并暂停计时器，或使用重置按钮重置整个游戏。

✥ 如果时间到了，页面将自动重新加载到分数页面，或者，您可以单击底部的“完成游戏”按钮。