js实现字体

字体设置方法

在JavaScript中设置字体样式可以通过直接操作DOM元素的style属性或使用CSS类名切换实现。

修改单个元素的字体样式

document.getElementById("targetElement").style.fontFamily = "Arial, sans-serif";
document.getElementById("targetElement").style.fontSize = "16px";
document.getElementById("targetElement").style.fontWeight = "bold";

批量修改样式 创建CSS类并通过JavaScript切换：

.custom-font {
  font-family: 'Georgia', serif;
  font-size: 18px;
  font-style: italic;
}

document.querySelectorAll(".text-elements").forEach(el => {
  el.classList.add("custom-font");
});

动态加载网络字体

使用FontFace API加载自定义字体：

const font = new FontFace('MyFont', 'url(https://fonts.example.com/myfont.woff2)');
font.load().then(() => {
  document.fonts.add(font);
  document.body.style.fontFamily = 'MyFont';
});

响应式字体调整

通过监听窗口大小变化动态调整字体：

function adjustFontSize() {
  const baseSize = 16;
  const scale = window.innerWidth / 1920;
  document.documentElement.style.fontSize = `${Math.min(baseSize * (1 + scale * 0.5), 24)}px`;
}

window.addEventListener('resize', adjustFontSize);
adjustFontSize();

动画效果实现

使用CSS变量和JavaScript实现动态字体动画：

let size = 12;
const animate = () => {
  size = (size % 24) + 1;
  document.documentElement.style.setProperty('--text-size', `${size}px`);
  requestAnimationFrame(animate);
};
animate();

对应的CSS：

:root {
  --text-size: 16px;
}
.animated-text {
  font-size: var(--text-size);
  transition: font-size 0.3s ease;
}