如何根据条件修改网页body的font family？以愚人节换Comic Sans为例

你提出的两种思路都完全可行，下面分别给出具体实现方法：

方案一：添加自定义类覆盖字体族 #

这种方式通过给body添加预定义的CSS类来切换字体，逻辑清晰，样式与代码分离，容易维护。

第一步：编写CSS样式 #

先定义默认字体和愚人节专用字体的类：

/* 全站默认字体 */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 愚人节字体类，优先级高于默认样式 */
body.foolish-font {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

第二步：编写JavaScript逻辑 #

利用你已掌握的日期判断逻辑，满足条件时给body添加自定义类：

// 示例：判断是否为4月1日（你可以替换成自己的条件判断逻辑）
const isAprilFoolsDay = new Date().getMonth() === 3 && new Date().getDate() === 1;

if (isAprilFoolsDay) {
  // 给body元素添加自定义类
  document.body.classList.add('foolish-font');
}

// 如果需要取消效果，执行下面代码即可
// document.body.classList.remove('foolish-font');

方案二：使用CSS变量动态修改 #

这种方式通过修改全局CSS变量的值来切换字体，更灵活，无需额外定义类，适合需要批量调整样式的场景。

第一步：编写CSS样式 #

先在全局根元素定义字体变量，让body及其他元素继承这个变量：

/* 定义全局CSS变量 */
:root {
  --main-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 全站使用该变量作为字体 */
body {
  font-family: var(--main-font);
}

/* 如果页面有其他单独设置字体的元素，也统一使用变量 */
h1, h2, p {
  font-family: var(--main-font);
}

第二步：编写JavaScript逻辑 #

满足条件时直接修改全局变量的值：

const isAprilFoolsDay = new Date().getMonth() === 3 && new Date().getDate() === 1;

if (isAprilFoolsDay) {
  // 修改全局CSS变量的值
  document.documentElement.style.setProperty('--main-font', '"Comic Sans MS", "Comic Sans", cursive');
}

// 如果需要恢复默认，执行下面代码
// document.documentElement.style.setProperty('--main-font', '"Helvetica Neue", Helvetica, Arial, sans-serif');

额外提示 #

• 记得给字体添加fallback选项（比如示例中的cursive、sans-serif），避免用户系统没有Comic Sans时显示异常。
• 如果页面中有元素单独设置了font-family且未继承body样式，需要让这些元素也使用CSS变量，才能同步修改字体。

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