Question

我对SweetAlert2有疑问。正如你在这张照片中看到的那样，我的swal2看起来如何，但在官方网站或其他网站上文字更顺畅，我该如何解决这个问题呢？也许我忘记了一个CSS / JS？

<!DOCTYPE html>
<html>
<head>
    <title> test </title>
    <link rel="stylesheet" type="text/css" href="css/sweetalert2.css">
    <script>
function myFn(){
swal(
  'Succes!',
  'Mesajul a fost trimis cu succes!',
  'success'
)
}
</script>
</head>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/sweetalert2.js"></script>
</body>
</html>

屏幕截图：http://prntscr.com/jnoula Github / JSFiddle：http://prntscr.com/jnovyf

 <?php echo '<script type="text/javascript">
                myFn();
                </script>'; ?>

Answer 1

SweetAlert2 doesn't define font-family but inherits it from the document. The reason is that alerts should look consistent with the rest of the page.

Define the font-family for your page and you'll be fine :)

Demo with Ubuntu typeface:

swal({
  title: 'So beautiful yet terrific!',
  type: 'success'
})

body {
  font-family: 'Ubuntu';
}

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

SweetAlert2蹩脚的文字

1 个答案: