☰

Tldraw Chinese Font Support

为Tldraw添加中文字体支持，自动监听字体变化

  1. // ==UserScript==
  2. // @name         Tldraw Chinese Font Support
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  为Tldraw添加中文字体支持，自动监听字体变化
  6. // @author       Your Name
  7. // @match        https://www.tldraw.com/*
  8. // @grant        GM_addStyle
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 添加字体样式
  16.     // 四种字体：draw : 手写字体
  17.     // sans : 无衬线字体，与中文的黑体对应
  18.     // serif : 衬线字体，与中文的宋体对应
  19.     // mono : 等宽字体，与中文的等宽字体对应
  20.     const fontStyles = `
  21.         [data-font="draw"] {
  22.             font-family: "字语青梅硬笔", "LXGW WenKai", cursive !important;
  23.         }
  24.         [data-font="sans"] {
  25.             font-family: "仓耳玄三01简繁", "PingFang SC", sans-serif !important;
  26.         }
  27.         [data-font="serif"] {
  28.             font-family: "FZYouSongS 509R", "宋体", "STSong", serif !important;
  29.         }
  30.         [data-font="mono"] {
  31.             font-family: "等距更纱黑体 SC" "LXGW WenKai Mono", "Source Han Mono SC", monospace !important;
  32.         }
  33.     `;
  34.  
  35.     // 创建样式元素
  36.     const styleElement = document.createElement('style');
  37.     styleElement.textContent = fontStyles;
  38.     document.head.appendChild(styleElement);
  39.  
  40.     // 创建 MutationObserver 来监听属性变化
  41.     const observer = new MutationObserver((mutations) => {
  42.         mutations.forEach((mutation) => {
  43.             if (mutation.type === 'attributes' && mutation.attributeName === 'data-font') {
  44.                 const element = mutation.target;
  45.                 const fontType = element.getAttribute('data-font');
  46.                 console.log('Font changed to:', fontType);
  47.             }
  48.         });
  49.     });
  50.  
  51.     // 监听配置
  52.     const observerConfig = {
  53.         attributes: true,
  54.         attributeFilter: ['data-font'],
  55.         subtree: true
  56.     };
  57.  
  58.     // 等待页面加载完成后开始监听
  59.     window.addEventListener('load', () => {
  60.         // 开始监听整个文档
  61.         observer.observe(document.body, observerConfig);
  62.         console.log('Chinese font support enabled');
  63.     });
  64. })();