侧边栏壁纸
博主头像
牧云

怀璧慎显,博识谨言。

  • 累计撰写 102 篇文章
  • 累计创建 12 个标签
  • 累计收到 8 条评论

目 录CONTENT

文章目录

更换网站字体

秋之牧云
2024-12-16 / 0 评论 / 0 点赞 / 143 阅读 / 0 字

1、字体网站

字体库:https://www.zfont.cn

在线压缩字体工具:https://cloudconvert.com/ttf-converter

2、全局引入css样式

<style>
  @font-face{
     font-family: "myfont";
     src: url('/upload/blog/common-font-regular.woff2');
  }
  *{
     font-size: 16px;
     font-family: "myfont" !important;
     --halo-comment-widget-base-font-family: "myfont" !important;  // 评论区字体
  }
</style>

3、监听、替换随机图{seed}标签

<script>
(function() {
  let counter = 0;

  function replaceSeedsInContainer(container) {
    const images = container.querySelectorAll 
      ? container.querySelectorAll('img[src*="picsum.photos/seed/"]')
      : (container.tagName === 'IMG' && container.src?.includes('picsum.photos/seed/') ? [container] : []);
    
    images.forEach(img => {
      if (img.dataset.seedReplaced) return;

      const seed = Date.now().toString() + '_' + (counter++);
      const replacer = str => str.replace(/\/seed\/[^\/]+\/350\/200/g, `/seed/${seed}/350/200`);

      if (img.src?.includes('/seed/')) img.src = replacer(img.src);
      if (img.dataset.src?.includes('/seed/')) img.dataset.src = replacer(img.dataset.src);
      if (img.srcset) img.srcset = replacer(img.srcset);

      img.dataset.seedReplaced = 'true';
    });
  }

  // 初始替换
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      replaceSeedsInContainer(document.body);
    });
  } else {
    replaceSeedsInContainer(document.body);
  }

  // 安全创建并启动 MutationObserver
  const observer = new MutationObserver(mutations => {
    for (const mut of mutations) {
      for (const node of mut.addedNodes) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          replaceSeedsInContainer(node);
        }
      }
    }
  });

  // 确保 document.body 已存在再 observe
  if (document.body) {
    observer.observe(document.body, { childList: true, subtree: true });
  } else {
    document.addEventListener('DOMContentLoaded', () => {
      observer.observe(document.body, { childList: true, subtree: true });
    });
  }
})();
</script>

本文出处:Halo评论区修改自定义字体 Halo自定义主题字体

0

评论区