如何修改SweetAlert.js弹窗的font-family字体属性？

.swal2-popup选择器修改字体不生效，核心原因通常是两点：

• 你贴的调用代码是SweetAlert 1.x的老语法（传回调函数而非Promise链式调用），1.x版本根本不存在.swal2-popup这个类名，自然匹配不到元素
• 就算用的是SweetAlert2版本，组件内部的标题、正文、按钮元素单独写了font-family规则，不会自动继承外层容器的字体，加上自定义CSS优先级低于组件默认样式，就会被覆盖。

1. 对应版本写高优先级CSS #

直接给弹窗内所有文本相关元素加样式，用!important提升优先级，避免被默认样式覆盖：

/* 如果是你代码对应的SweetAlert 1.x 版本，用这组选择器 */
.swal-modal, .swal-title, .swal-text, .swal-button {
  font-family: 你要设置的字体, sans-serif !important;
}

/* 如果是SweetAlert2 版本，用这组选择器 */
.swal2-popup, .swal2-title, .swal2-html-container, .swal2-confirm, .swal2-cancel {
  font-family: 你要设置的字体, sans-serif !important;
}

注意不要只给外层弹窗容器设置字体，内部子元素如果有单独的字体声明，继承样式会失效。

2. 调用时传入自定义类（推荐，不会污染全局样式） #

不管是1.x还是2.x版本，都支持在初始化时传入customClass参数，给弹窗绑定自定义类名，单独写样式即可：

// SweetAlert 1.x 适配你现有代码的写法
swal({
  title: "Success!",
  text: "You created your team.That's amazing!",
  type: "success",
  timer: 2000,
  showConfirmButton: false,
  customClass: "my-custom-swal" // 自定义类名
}, function(){
  window.location.href = "/generatelinkQR.php";
});

对应CSS：

.my-custom-swal, .my-custom-swal .swal-title, .my-custom-swal .swal-text {
  font-family: 你要设置的字体, sans-serif;
}

快速排查技巧 #

打开浏览器开发者工具，用元素选择器点中弹窗内的文本节点，在右侧「计算样式（Computed）」面板找到font-family属性，就能看到当前生效的是哪条CSS规则，直接定位是选择器写错还是优先级不够的问题。

内容的提问来源于stack exchange，提问作者Katerina Maria Gerakianaki