如何无需逐个修改元素，为HTML页面设置全局默认fallback字体？

现有HTML页面里，部分<p>元素通过内联style的font-family属性指定了Arial、Comic Sans、Agave这类字体。不想逐个给每个文本元素的font-family手动加",Courier"，要让Courier成为整个页面所有文本元素的 fallback 字体，效果等同于每个元素都在font-family里追加了Courier。

原始页面代码示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<p style="font-family:Arial">Text 1</p>
<p style="font-family:Comic Sans">Text 2</p>
<p style="font-family:Agave">Text 3</p>
...
</body>
</html>

期望效果等同于手动修改后的代码（但无需逐个编辑内联样式）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<p style="font-family:Arial,Courier">Text 1</p>
<p style="font-family:Comic Sans,Courier">Text 2</p>
<p style="font-family:Agave,Courier">Text 3</p>
...
</body>
</html>

解决方法 #

方法1：用JavaScript批量修改内联样式 #

直接写一段脚本，遍历所有带内联font-family的元素，自动把Courier追加到属性值末尾，不用手动改每一行：

// 遍历所有带有font-family内联样式的p元素，需要的话可以扩展到其他文本元素
document.querySelectorAll('p[style*="font-family"]').forEach(el => {
  const currentFont = el.style.fontFamily.trim();
  // 避免重复添加Courier
  if (!currentFont.includes('Courier')) {
    el.style.fontFamily = `${currentFont}, Courier`;
  }
});

把这段代码放在页面底部（或者DOMContentLoaded事件里），页面加载后就会自动完成修改，效果和手动添加完全一致。

方法2：CSS变量+全局样式（不修改DOM） #

如果不想改动页面里的内联样式结构，可以用CSS变量配合全局样式实现：

1. 在页面的<head>里加一段全局CSS：

:root {
  --fallback-font: Courier;
}
/* 把所有可能带内联字体的元素都列进来，比如p、span、div等 */
p {
  font-family: var(--custom-font), var(--fallback-font) !important;
}

2. 把原来的内联style="font-family:XXX"改成style="--custom-font:XXX"：

<p style="--custom-font: Arial">Text 1</p>
<p style="--custom-font: Comic Sans">Text 2</p>
<p style="--custom-font: Agave">Text 3</p>

这种方式只是把内联的字体赋值给自定义变量，通过CSS的级联规则，自动让Courier作为备选字体生效。

方法3：CSS attr()函数（兼容性有限） #

部分现代浏览器支持用attr()函数读取自定义属性的值，结合全局样式实现：

1. 加全局CSS：

p {
  font-family: attr(data-font family), Courier;
}

2. 把内联的style="font-family:XXX"换成data-font="XXX"：

<p data-font="Arial">Text 1</p>
<p data-font="Comic Sans">Text 2</p>
<p data-font="Agave">Text 3</p>

注意：这个方法的兼容性不如前两种，要确认目标浏览器支持attr()在font-family中的使用。

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