javascript - SweetAlert2 蹩脚文本

标签 javascript html sweetalert2

我有一个关于 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>'; ?>

最佳答案

SweetAlert2 没有定义 font-family,但从文档继承它。原因是警报应该看起来与页面的其余部分保持一致。

为您的页面定义 font-family 就可以了:)

使用 Ubuntu 字体的演示:

Swal.fire({
  title: 'So beautiful yet terrific!',
  icon: 'success'
})
body {
  font-family: 'Ubuntu';
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 

关于javascript - SweetAlert2 蹩脚文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50570897/

相关文章:

javascript - 将 SweetAlert2 与 Angular 一起使用时如何保持范围?

javascript - 使用 Puppeteer 在 Node.js 中同步打印

javascript - 从选中的复选框中获取文本

html - 为什么表格会在左右两侧添加额外的空间?

html - 是否可以在甜蜜警报 2 中添加整个 Angular 组件?

javascript - Sweet Alert 中使用 JSX 代替 HTML

javascript - 使用 AngularJS,使用 {{ 和 }} 作为文字

javascript - 单击时更改按钮名称并保存

javascript - 从 HTML/文本中提取 URL,但如果 URL 仅显示部分内容,如 "/secondpage.html"?

javascript - 如何在 JavaScript 中获取 anchor 链接文本并使用参数调用