HTML动态切换字体技巧全解析

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
}

.font-serif { font-family: 'Georgia', serif; }
.font-sans { font-family: 'Arial', sans-serif; }
.font-mono { font-family: 'Courier New', monospace; }
.font-custom { font-family: 'CustomFont', sans-serif; }

<select id="fontSelector">
  衬线体
  无衬线体
  等宽字体
  自定义字体
</select>

document.getElementById('fontSelector').addEventListener('change', function() {
  const body = document.body;
  body.className = body.className.replace(/font-\w+/g, '');
  body.classList.add(this.value);
});

function loadGoogleFont(fontName) {
  const link = document.createElement('link');
  link.href = `https://fonts.googleapis.com/css2?family=${fontName}`;
  link.rel = 'stylesheet';
  document.head.appendChild(link);
}

// 示例：加载 "Noto+Sans+SC"
loadGoogleFont('Noto+Sans+SC');