CSS如何选择所有应用了指定字体的元素

你原来写的属性选择器无法生效的核心原因是：[font-family*=Menlo]只能匹配HTML标签上显式写了font-family行内属性，且属性值包含Menlo的元素，绝大多数场景下字体都是通过CSS样式表设置的，不属于行内属性，所以这个选择器几乎匹配不到任何元素。

以下是两种可行的实现方案：

方案1：CSS字体别名替换（最简单，适配全局替换需求） #

如果你只是要把所有用到Menlo的地方替换成目标字体，直接用@font-face做字体映射即可，不需要主动选择元素：

@font-face {
  font-family: 'Menlo';
  src: local('OpenDyslexicMono');
  /* 如果需要引用线上字体文件，补充对应的src地址即可 */
}

所有原本调用Menlo字体的位置，都会自动匹配到这个自定义的@font-face规则，自动使用你指定的字体渲染。

方案2：JS遍历匹配（适用于需要选中元素做额外操作的场景） #

如果你确实需要选中所有使用了指定字体的元素做其他处理，可以通过遍历DOM+读取计算后样式的方式实现：

const targetFont = 'Menlo'
const replaceFont = 'OpenDyslexicMono'

// 遍历页面所有元素
document.querySelectorAll('*').forEach(element => {
  // 获取元素最终渲染用的计算后字体样式
  const computedFont = window.getComputedStyle(element).fontFamily.toLowerCase()
  // 匹配目标字体，自动忽略大小写、字体名前后的引号
  if (computedFont.includes(targetFont.toLowerCase())) {
    // 这里可以写任意自定义操作，示例为替换字体
    element.style.fontFamily = replaceFont
  }
})

注意：如果页面有动态加载的内容（比如异步渲染的组件、滚动加载的列表），需要在新内容渲染完成后重新执行上述代码，才能匹配到新增的元素。

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