CSS如何让子元素字体回退至父元素字体？能否修改浏览器默认回退字体？

1. 让子元素字体不可用时回退到父元素字体 #

要实现子元素指定字体不可用时继承父元素字体，且不修改用户原有HTML内容，可以通过JavaScript + CSS组合实现：

思路 #

利用CSS变量保存每个元素原本的字体设置，再通过全局样式追加inherit作为最终回退项，这样当元素指定的字体不可用时，会自动继承父元素的字体。

实现代码 #

首先添加全局CSS样式：

* {
  font-family: var(--element-font), inherit !important;
}

然后用JavaScript遍历所有元素，将每个元素的计算字体赋值给CSS变量：

function setupFontFallback(rootElement) {
  const computedStyle = window.getComputedStyle(rootElement);
  // 保存元素原本的字体列表
  rootElement.style.setProperty('--element-font', computedStyle.fontFamily);
  
  // 递归处理所有子元素
  Array.from(rootElement.children).forEach(child => {
    setupFontFallback(child);
  });
}

// 从body开始遍历处理
setupFontFallback(document.body);

这样，像示例中<div style="font-family: B">的元素，实际生效的字体规则会变成font-family: B, inherit，当字体B不可用时，就会继承body的字体A。

2. 修改浏览器默认回退字体 #

应用内自定义回退字体 #

作为网页应用，你无法直接修改浏览器全局的默认字体设置，但可以在应用内设置全局基础字体，作为所有内容的最底层回退：

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

这段代码会让页面在没有任何自定义字体设置时，优先使用系统原生字体族，适配不同操作系统的默认样式。

修改浏览器全局默认字体 #

如果要修改浏览器本身的全局默认回退字体，只能由用户手动操作：

• Chrome/Edge：进入设置 → 外观 → 自定义字体，调整各类文本的默认字体及回退顺序。
• Firefox：进入设置 → 常规 → 字体与颜色 → 高级，配置默认字体和回退选项。

内容的提问来源于stack exchange，提问作者Haowen Chen