如何使用JS实现HTML元素的font-family每隔0.1秒在6种字体间自动轮转

核心逻辑是用setInterval定时器周期性切换字体，通过下标取模实现6种字体的循环轮转，无需任何手动触发，页面加载后自动执行。

完整可直接使用的代码示例 #

document.addEventListener('DOMContentLoaded', () => {
  // 此处替换为你自己的6种预设字体族
  const presetFonts = [
    'serif',
    'sans-serif',
    'monospace',
    'cursive',
    'fantasy',
    'system-ui'
  ];
  // 替换为你要修改的目标元素，示例为修改id为"target"的元素
  const targetEl = document.getElementById('target');
  // 如果要修改整个页面的字体，替换为下行即可
  // const targetEl = document.body;

  let currentFontIndex = 0;
  // 100对应0.1秒的切换间隔，可按需调整
  setInterval(() => {
    targetEl.style.fontFamily = presetFonts[currentFontIndex];
    currentFontIndex = (currentFontIndex + 1) % presetFonts.length;
  }, 100);
});

补充说明 #

• 如果你的自定义字体没有提前加载完成，切换时会自动降级为浏览器默认字体，建议提前对自定义字体做预加载处理
• 如果后续需要停止字体切换，只需要把setInterval的返回值存为变量，调用clearInterval(变量名)即可终止
• 切换间隔可以自行调整第二个参数的数值，单位为毫秒，比如要改成0.5秒切换一次就改成500

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