如何用JS动态改变网页的font-family？-网页设计-锦华智联科技

直接修改 `body` 的样式（最简单、最常用）

这是最直接的方法,适用于全局字体更改，它会将整个页面的默认字体设置为新的字体。

核心思路： 获取 <body> 元素，然后直接修改其 style.fontFamily 属性。

代码示例

// 1. 定义你想要使用的字体
// 注意：这里使用的是 web 安全字体，确保在大多数系统上都能显示
const newFontFamily = "'Helvetica Neue', Helvetica, Arial, sans-serif";
// 2. 获取 body 元素
const bodyElement = document.body;
// 3. 修改 body 的 font-family
bodyElement.style.fontFamily = newFontFamily;
// 如果你想把它打印到控制台确认一下
console.log(`字体已更改为: ${newFontFamily}`);

如何使用

将这段 JavaScript 代码放在你的 HTML 文件的 <script> 标签内即可，通常建议放在 </body> 标签之前，以确保 DOM 已经完全加载。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">改变字体示例</title>
    <style>
        body {
            font-size: 18px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
        }
        p {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是一段示例文本，用于展示字体变化，你可以看到，这段文字的字体已经改变了。</p>
    <script>
        // --- 在这里插入上面的 JavaScript 代码 ---
        const newFontFamily = "'Helvetica Neue', Helvetica, Arial, sans-serif";
        const bodyElement = document.body;
        bodyElement.style.fontFamily = newFontFamily;
        console.log(`字体已更改为: ${newFontFamily}`);
    </script>
</body>
</html>

通过 CSS 类切换（更灵活、更推荐）

如果你想让用户可以选择不同的字体,或者在不同场景下切换字体，使用 CSS 类是更好的方式。

核心思路：

在 CSS 中预先定义好多个字体样式类（.font-serif, .font-sans-serif）。
在 JavaScript 中，通过添加或移除这些类来改变元素的样式。

步骤 1：在 CSS 中定义字体类

/* 默认字体，或者 body 的基础样式 */
body {
    font-size: 18px;
    transition: font-family 0.3s ease; /* (可选) 添加平滑过渡效果 */
}
/* 衬线字体，适合阅读长文 */
.font-serif {
    font-family: 'Georgia', 'Times New Roman', serif;
}
/* 无衬线字体，现代感强 */
.font-sans-serif {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
/* 等宽字体，适合代码 */
.font-mono {
    font-family: 'Courier New', Courier, monospace;
}

步骤 2：在 JavaScript 中切换类

// 假设我们有一个按钮，点击它就切换到衬线字体
const serifButton = document.getElementById('serif-button');
serifButton.addEventListener('click', function() {
    // 移除其他字体类（如果需要）
    document.body.classList.remove('font-sans-serif', 'font-mono');
    // 添加新的字体类
    document.body.classList.add('font-serif');
});
// 同样，可以为其他按钮添加事件监听器
const sansSerifButton = document.getElementById('sans-serif-button');
sansSerifButton.addEventListener('click', function() {
    document.body.classList.remove('font-serif', 'font-mono');
    document.body.classList.add('font-sans-serif');
});
const monoButton = document.getElementById('mono-button');
monoButton.addEventListener('click', function() {
    document.body.classList.remove('font-serif', 'font-sans-serif');
    document.body.classList.add('font-mono');
});

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">字体切换示例</title>
    <style>
        body { font-size: 18px; line-height: 1.6; transition: font-family 0.3s ease; }
        h1 { margin-bottom: 20px; }
        .controls { margin-bottom: 20px; }
        button { margin-right: 10px; padding: 8px 12px; cursor: pointer; }
    </style>
    <!-- 在这里引入上面的 CSS 类定义 -->
    <style>
        .font-serif { font-family: 'Georgia', 'Times New Roman', serif; }
        .font-sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        .font-mono { font-family: 'Courier New', Courier, monospace; }
    </style>
</head>
<body>
    <h1>字体切换演示</h1>
    <div class="controls">
        <button id="serif-button">衬线字体</button>
        <button id="sans-serif-button">无衬线字体</button>
        <button id="mono-button">等宽字体</button>
    </div>
    <p>
        这是一段示例文本，点击上方的按钮，可以实时改变这段文字的字体。
        这种方法比直接修改 style 更加灵活，也更容易维护。
    </p>
    <!-- 在这里引入上面的 JavaScript 代码 -->
    <script>
        document.getElementById('serif-button').addEventListener('click', () => {
            document.body.className = 'font-serif'; // 直接设置类，覆盖其他
        });
        document.getElementById('sans-serif-button').addEventListener('click', () => {
            document.body.className = 'font-sans-serif';
        });
        document.getElementById('mono-button').addEventListener('click', () => {
            document.body.className = 'font-mono';
        });
    </script>
</body>
</html>

使用 `document.documentElement` 修改 CSS 变量（高级、现代）

如果你的项目使用了 CSS 变量（自定义属性），这是最优雅、最现代的解决方案，它将样式与行为完全分离。

核心思路：

在 CSS 中定义一个或多个代表字体的 CSS 变量。
在 JavaScript 中，修改 document.documentElement (即 <html> 标签) 上的 CSS 变量值。

步骤 1：在 CSS 中定义 CSS 变量

:root {
    /* 定义默认字体 */
    --primary-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --secondary-font-family: 'Georgia', serif;
}
/* 将 CSS 变量应用到 body */
body {
    font-family: var(--primary-font-family);
    font-size: 18px;
    line-height: 1.6;
}

步骤 2：在 JavaScript 中修改变量值

// 获取 html 元素
const htmlElement = document.documentElement;
// 函数：改变主字体
function setPrimaryFont(fontFamily) {
    htmlElement.style.setProperty('--primary-font-family', fontFamily);
}
// 函数：改变副字体
function setSecondaryFont(fontFamily) {
    htmlElement.style.setProperty('--secondary-font-family', fontFamily);
}
// --- 使用示例 ---
// 将主字体更改为衬线字体
setPrimaryFont("'Times New Roman', Times, serif");
// 将副字体更改为无衬线字体
setSecondaryFont("Arial, Helvetica, sans-serif");

为什么这种方法好？

关注点分离：JavaScript 只负责“改变值”，而 CSS 负责“如何应用这个值”，代码更清晰。
易于维护：所有字体定义都在 CSS 中，修改时无需动 JavaScript 代码。
作用域清晰：CSS 变量可以定义在 root（全局）或任何选择器下，作用域控制非常灵活。

总结与最佳实践

方法	优点	缺点	适用场景
直接修改 `style`	简单直接，代码少	不够灵活，难以维护，无法平滑过渡	一次性设置，或非常简单的脚本
切换 CSS 类	灵活、可维护性好、可添加过渡动画	需要预先在 CSS 中定义类	推荐用于大多数场景，特别是需要用户交互切换字体时
修改 CSS 变量	最现代、最优雅、关注点分离、作用域灵活	需要项目支持 CSS 变量	大型项目、现代前端框架、需要高度样式管理的场景

对于绝大多数网页应用,方法二（通过 CSS 类切换） 是最佳选择，因为它在易用性、灵活性和可维护性

如何用JS动态改变网页的font-family？

直接修改 body 的样式（最简单、最常用）