引入LinkedIn徽章JavaScript后页面全局CSS字体样式被破坏如何解决

问题成因 #

LinkedIn官方徽章的JS脚本在执行时，会动态向页面的html或body根标签注入全局字体样式规则，该规则由脚本动态插入，优先级高于你静态编写的html选择器字体设置，会直接覆盖你原本设定的Calibri字体，导致全页面字体继承根元素的新字体规则，出现样式异常。你之前给徽章容器设置样式隔离的方案不生效，是因为问题根源并非徽章容器的样式外溢，而是脚本直接修改了全局根节点的样式配置，和徽章容器本身的样式隔离无关。

解决方案 #

方案1（最简单，推荐） #

提升全局字体规则的优先级，直接覆盖第三方脚本注入的样式，修改你的CSS代码如下：

html, body {
  font-family: "Calibri" !important;
}

加!important后该规则的优先级会高于脚本动态插入的同级别规则，不会被覆盖。

方案2（不想用!important时可选） #

使用优先级更高的:root伪类选择器定义全局字体，优先级高于普通标签选择器，大部分场景下也可以覆盖脚本注入的样式：

:root, body {
  font-family: "Calibri";
}

方案3（极端场景可选） #

如果上述方案都失效，可以通过MutationObserver监听根节点的样式变更，自动修正被篡改的字体设置：

const observer = new MutationObserver(() => {
  if (document.documentElement.style.fontFamily !== 'Calibri') {
    document.documentElement.style.fontFamily = 'Calibri';
  }
  if (document.body.style.fontFamily !== 'Calibri') {
    document.body.style.fontFamily = 'Calibri';
  }
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
observer.observe(document.body, { attributes: true, attributeFilter: ['style'] });

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