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

Question

我正在尝试使用 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查看控制台，没有报错。浏览器可以访问所有需要的文件。

Answer 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;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

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

How can I use Sweetalert with CSS applied?

html

css

sweetalert2