如何在应用了 CSS 的情况下使用 Sweetalert？答案

【问题标题】：How can I use Sweetalert with CSS applied?如何在应用了 CSS 的情况下使用 Sweetalert？
【发布时间】：2019-08-18 20:06:04
【问题描述】：

我正在尝试使用 Sweetalert 2 (https://sweetalert2.github.io/) 库在页面上弹出警告消息。甚至，我认为我正确链接了 CSS 文件，警告消息以纯文本显示。未应用 CSS 规则。

我准备了一个只有警告消息的最小页面以排除其他原因，但没有任何改变。

这是头部。

<head>
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/sweetalert2@8/dist/sweetalert2.min.css">
</head>

这就是身体。

<body>
    <script>
        $(document).ready(function () {
            Swal.fire({
               type: 'question',
               title: 'Oops...',
               text: 'Something went wrong!',
               footer: '<a href>Why do I have this issue?</a>'
            })
        });
    </script>
</body>

我预计应用了 CSS 的警告消息，但显示为没有 CSS 的丑陋字体。我用F12检查了控制台，没有错误。浏览器可以访问所有需要的文件。

【问题讨论】：

标签： html css sweetalert2

【解决方案1】：

您的实施没有任何问题。 SweetAlert2 使用font-family: inherit;，因此它将采用父字体。

要解决这个问题，您只需为<body> 相应地设置font-family。

Swal.fire({
  type: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href>Why do I have this issue?</a>'
})

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"&gt;&lt;/script&gt;

【讨论】：

这解决了 Nidhin 的问题。谢谢你。但是我已经看到 Sweetalert2 与 Bootstrap 配合得不是很好。 Bottstrap 的 CSS 覆盖了 Sweetlart，并且还需要采取进一步的措施来纠正这个问题。我现在正在调查，但你的回答是准确的。
也为我工作。