本文介绍一种轻量、可靠的方式，使用原生 javascript 一键修改网页全部文本元素的字体族，无需依赖框架或外部库，特别适用于 gdpr 合规场景（如用户拒绝 cookie 时降级使用系统字体）。
本文介绍一种轻量、可靠的方式，使用原生 javascript 一键修改网页全部文本元素的字体族，无需依赖框架或外部库，特别适用于 gdpr 合规场景（如用户拒绝 cookie 时降级使用系统字体）。
要真正“改变整个网站的字体”，不能只操作单个元素（如 document.querySelector('#your-element')），而需批量覆盖所有可能承载文本的 HTML 元素。以下是一段简洁、安全、可直接部署的脚本：
// ✅ 推荐：全局字体设置函数（支持回退与作用域控制）
function setGlobalFont(fontFamily = 'system-ui, -apple-system, sans-serif') {
// 选择常见文本容器：body 为根，确保继承性；同时显式设置内联文本元素防遗漏
const targets = [
document.body,
...document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a, li, td, th, div[contenteditable="true"], article, section, footer, header')
];
targets.forEach(el => {
el.style.fontFamily = fontFamily;
});
}
// ? 使用示例：用户拒接 Cookie 后调用
if (!Cookies.get('cookie_consent')) {
setGlobalFont('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif');
}
⚠️ 注意事项：
-
优先使用 CSS 继承：理想做法是直接修改
的font-family，让子元素自然继承（大多数现代布局已遵循此原则）。上述脚本额外选取关键内联元素，是为了兜底处理font-family: inherit被覆盖或未声明的特殊情况。 -
避免污染内联样式：若网站已用 CSS 框架（如 Bootstrap）或有复杂样式优先级，建议改用动态插入
<style></style>标签的方式（更干净、易维护）：
function setGlobalFontViaCSS(fontFamily) {
const style = document.createElement('style');
style.textContent = `
body, body * { font-family: ${fontFamily} !important; }
/* !important 仅在必要时使用，建议先测试无冲突方案 */
`;
document.head.appendChild(style);
}
-
性能与可访问性：批量设置
style.fontFamily不会触发重排（reflow），但频繁调用仍建议节流；同时请确保所选字体具备良好的可读性与无障碍支持（如避免纯装饰性字体用于正文）。
✅ 总结：对 WordPress + Cookie 插件场景，你可在用户拒绝授权后执行 setGlobalFont()，实现无 Cookie 状态下的字体优雅降级——既满足合规要求，又保持用户体验一致性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
