本文介绍一种简洁可靠的 javascript 方法，无需依赖外部库，即可一键全局替换网页字体，特别适用于 gdpr 合规场景（如用户拒绝 cookie 时降级使用系统默认字体）。
本文介绍一种简洁可靠的 javascript 方法，无需依赖外部库，即可一键全局替换网页字体，特别适用于 gdpr 合规场景（如用户拒绝 cookie 时降级使用系统默认字体）。
在实际开发中，尤其是 WordPress 等 CMS 环境下，常需根据用户隐私偏好（例如 Cookie 授权状态）动态调整界面样式。当用户拒绝非必要 Cookie 时，为保障合规性与可用性，推荐将自定义网络字体（如 Google Fonts 或 Webfont 加载脚本）回退至安全、无追踪的系统字体栈——此时，纯前端 JavaScript 方案既轻量又可控。
✅ 全局字体替换的核心思路
不是逐个设置每个元素的 style.fontFamily（效率低且易遗漏），而是通过修改 或 的内联样式，并结合 CSS 层叠机制实现全站覆盖。更推荐的方式是：动态注入一条 CSS 规则，确保所有文本元素（包括后续动态插入的内容）自动继承新字体。
以下是一段健壮、可复用的脚本：
function setGlobalFont(fontFamily) {
// 创建或复用 style 标签
let style = document.getElementById('global-font-style');
if (!style) {
style = document.createElement('style');
style.id = 'global-font-style';
document.head.appendChild(style);
}
// 写入 CSS 规则（重置 body 及常见文本容器）
style.textContent = `
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th, button, input, textarea {
font-family: ${fontFamily} !important;
}
`;
}
// 使用示例：用户拒绝 Cookie 后执行
if (!cookieConsentAccepted()) {
setGlobalFont('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
}
? 提示：
!important可确保覆盖多数现有样式；但若项目大量使用!important或 Shadow DOM，建议优先在 CSS 中定义.no-cookies { font-family: ... }类，并通过document.body.classList.add('no-cookies')切换，语义更清晰、维护性更强。
⚠️ 注意事项
-
避免滥用
!important：长期项目中应尽量通过 CSS 优先级管理样式，而非依赖 JS 强制覆盖； -
字体栈务必包含通用后备：如
sans-serif或serif，防止自定义字体加载失败导致空白； -
性能考量：该脚本应在 DOM 加载完成后执行（如
DOMContentLoaded事件中），避免操作未挂载的节点； -
WordPress 集成建议：可将脚本封装为独立
.js文件，通过wp_enqueue_script()注册，并在主题functions.php中根据 Cookie 状态动态wp_add_inline_script()注入判断逻辑。
掌握这一技巧后，你不仅能快速响应隐私合规需求，还能灵活实现 A/B 字体测试、可访问性增强（如高对比度字体切换）等进阶功能。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
