求助：SweetAlert2文本显示粗糙如何修复？是否遗漏CSS/JS？

嘿，我来帮你搞定这个SweetAlert2文本显示粗糙的问题～ 从你的代码和描述来看，大概率是样式加载不全、版本老旧或者路径出了问题，下面给你几个排查和修复的方向：

1. 先确认CSS文件是否正确加载 #

你代码里用的是本地的sweetalert2.css，首先得检查这个文件的路径对不对，有没有加载失败。打开浏览器的开发者工具（按F12），切换到「网络」面板，刷新页面后看看这个CSS文件的状态：

• 如果显示404，说明路径写错了，调整成正确的相对路径就行；
• 如果加载成功，再打开这个CSS文件看看内容是不是完整的，有没有漏掉字体平滑相关的样式代码。

2. 换成最新版本的SweetAlert2文件 #

旧版本的SweetAlert2可能没做字体平滑的优化，建议你去官方渠道下载最新的压缩版文件（sweetalert2.min.css和sweetalert2.min.js），替换掉你本地的旧文件。压缩版不仅体积更小，样式也更完整。修改后的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <title> test </title>
  <!-- 引入最新压缩版的SweetAlert2样式 -->
  <link rel="stylesheet" type="text/css" href="css/sweetalert2.min.css">
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <!-- 引入最新压缩版的SweetAlert2脚本 -->
  <script type="text/javascript" src="js/sweetalert2.min.js"></script>
  <script>
    function myFn(){
      // 最新版推荐用Swal.fire()，也兼容旧的swal()写法
      Swal.fire( 'Success!', 'Mesajul a fost trimis cu succes!', 'success' )
    }
    // 确保页面和脚本都加载完再执行弹窗，避免样式没生效
    document.addEventListener('DOMContentLoaded', function() {
      // 如果需要页面一加载就弹窗，在这里调用myFn()就行
      // myFn();
    });
  </script>
</body>
</html>

3. 检查是否有其他CSS干扰了字体样式 #

有时候页面的全局CSS或者其他组件的样式会覆盖SweetAlert2的字体设置。你可以用开发者工具查看弹窗元素的CSS，确认下面这两个属性有没有被正确应用：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

如果这两个属性被别的样式覆盖了，就给SweetAlert2的弹窗加个自定义样式强制启用：

.swal2-popup {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

4. 保证触发代码在脚本加载完成后执行 #

你用PHP输出的myFn()调用，一定要放在SweetAlert2脚本加载完成之后。比如把PHP输出的脚本放在页面底部，或者用DOMContentLoaded事件包裹，这样既能避免swal未定义的错误，也能保证样式已经加载完毕，弹窗显示正常。

按上面的步骤排查后，应该就能解决文本粗糙的问题啦～

内容的提问来源于stack exchange，提问作者Bogdan Bogdan