按一定间隔自动更改字体系列

Auto-change font-family at certain interval

本文关键字：字体 系列      更新时间：2023-09-26

我希望你能为我指明正确的方向。

我想创建一个网站，在那里字体家族以一定的间隔变化。然后循环。例如：

  1. 文本以Arial开头
  2. 时代的变化新罗马
  3. 对Verdana的更改
  4. 再次改回Arial，依此类推

如何做到这一点？每次我搜索这个时，我只得到如何使字体大小或字体颜色在一定间隔内自动更改的解决方案，但从来没有得到字体系列的解决方案。如果你能告诉我在这里用哪种方法，我将不胜感激。

一种简单的方法：

var fonts = ['times', 'verdana', 'arial'];
var currentFont = 0
function changeFont() {
  document.body.style.fontFamily = fonts[currentFont++ % fonts.length]
}
setInterval(changeFont, 1000);
My font will change

首先，将css类属性添加到页面中您希望受到影响的所有部分；比方说：class="my_font_family_class"

然后，这里是要处理的代码：

window.myInterval= 3600 * 1000;// every hour
window.fontFamilies =["Arial","Times New Roman", "Verdana" ];
window.fontFamilyCounter=0;
setInterval(function(){
   $('.my_font_family_class').css("font-family", window.fontFamilies[window.fontFamilyCounter % window.fontFamilies.length]);
   window.fontFamilyCounter ++;
}, window.myInterval);
相关文章：