JavaScript 添加 sl-china 字体：静态和动态内容

使用 JavaScript 脚本在网页所有字体属性前添加 'sl-china' 字体：静态和动态内容

本文将介绍如何使用 JavaScript 脚本在网页所有字体属性前添加 'sl-china' 字体，并确保该操作对静态和动态加载的内容都有效。

代码示例

// 获取所有 HTML 元素
var elements = document.getElementsByTagName('*');

// 遍历每个元素
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];

  // 检查元素是否具有字体属性
  if (element.style.fontFamily) {
    // 在字体属性前添加 'sl-china' 字体
    element.style.fontFamily = 'sl-china, ' + element.style.fontFamily;
  } else {
    // 如果元素没有字体属性，那么添加 'sl-china' 字体
    element.style.fontFamily = 'sl-china';
  }
}

// 监听 DOM 元素的变化，并在变化时重新应用字体
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++) {
      var node = mutation.addedNodes[i];
      if (node.nodeType === Node.ELEMENT_NODE) {
        var elements = node.getElementsByTagName('*');
        for (var j = 0; j < elements.length; j++) {
          var element = elements[j];
          if (element.style.fontFamily) {
            element.style.fontFamily = 'sl-china, ' + element.style.fontFamily;
          } else {
            element.style.fontFamily = 'sl-china';
          }
        }
      }
    }
  });
});

// 监视整个文档的变化
observ.observe(document, { childList: true, subtree: true });

代码解释

获取所有 HTML 元素： document.getElementsByTagName('*') 获取页面中所有的元素。
遍历每个元素： 使用 for 循环遍历所有元素。
检查字体属性： 检查每个元素是否具有 style.fontFamily 属性。
添加 'sl-china' 字体：
- 如果元素有 style.fontFamily 属性，就在该属性值前面添加 'sl-china' 字体。
- 如果元素没有 style.fontFamily 属性，就将 'sl-china' 字体设置为该元素的 style.fontFamily 属性值。
使用 MutationObserver 监听 DOM 变化：
- 创建一个 MutationObserver 实例，并在它检测到 DOM 变化时，执行回调函数。
- 回调函数遍历所有新增的节点，并检查它们是否具有字体属性，如果有，就添加 'sl-china' 字体。
监视整个文档的变化： 使用 observer.observe(document, { childList: true, subtree: true }) 监视整个文档的变化，包括新增、删除或修改的节点。

使用方法

将以上代码添加到网页的 <head> 标签中，并确保 'sl-china' 字体已经加载到网页中。

注意事项

'sl-china' 字体名称需根据实际情况进行替换。
如果网页中存在多个字体，则 'sl-china' 字体会优先于其他字体。
如果需要在 'sl-china' 字体之后添加其他字体，可以使用空格隔开。
在使用 MutationObserver 监听 DOM 变化时，建议选择合适的监视范围，避免过度监听导致性能问题。

总结

通过以上代码，可以轻松地将 'sl-china' 字体添加到网页所有元素的字体属性前面，并确保该操作对静态和动态加载的内容都有效。