html如何切换字体_HTML字体切换（用户/动态加载）方法

爱谁谁 2025-11-14 00:00:00 次阅读

通过HTML、CSS和JavaScript可实现网页字体切换功能。1. 使用@font-face和CSS类定义多种字体样式；2. 创建下拉菜单供用户选择字体；3. 用JavaScript监听选择变化并动态更新body类名以切换字体；4. 按需通过JS动态加载Google Fonts等外部字体资源，提升阅读体验同时注意字体版权合规性。

在网页开发中，实现字体切换（用户可选或动态加载）能提升阅读体验。通过 HTML、CSS 和 JavaScript 配合，可以轻松实现用户自定义字体的功能。

1. 使用 CSS 定义可用字体

先在 CSS 中预设几种字体样式，供切换时使用：

@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; }

这些类代表不同字体风格，后续通过 JS 动态添加到页面主体即可切换。

2. 提供字体选择控件（HTML）

添加下拉菜单或按钮，让用户选择喜欢的字体：

3. 用 JavaScript 实现动态切换

监听选择变化，并更新 body 的类名：

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

这样每次用户更改选项，页面字体就会实时更新。

4. 动态加载外部字体（如 Google Fonts）

如果想按需加载网络字体（比如用户选“思源黑体”时再加载），可用以下方法：

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');