Tldraw Chinese Font Support

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

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Tldraw Chinese Font Support
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  为Tldraw添加中文字体支持,自动监听字体变化
// @author       Your Name
// @match        https://www.tldraw.com/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加字体样式
    // 四种字体:draw : 手写字体
    // sans : 无衬线字体,与中文的黑体对应
    // serif : 衬线字体,与中文的宋体对应
    // mono : 等宽字体,与中文的等宽字体对应
    const fontStyles = `
        [data-font="draw"] {
            font-family: "字语青梅硬笔", "LXGW WenKai", cursive !important;
        }
        [data-font="sans"] {
            font-family: "仓耳玄三01简繁", "PingFang SC", sans-serif !important;
        }
        [data-font="serif"] {
            font-family: "FZYouSongS 509R", "宋体", "STSong", serif !important;
        }
        [data-font="mono"] {
            font-family: "等距更纱黑体 SC" "LXGW WenKai Mono", "Source Han Mono SC", monospace !important;
        }
    `;

    // 创建样式元素
    const styleElement = document.createElement('style');
    styleElement.textContent = fontStyles;
    document.head.appendChild(styleElement);

    // 创建 MutationObserver 来监听属性变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'data-font') {
                const element = mutation.target;
                const fontType = element.getAttribute('data-font');
                console.log('Font changed to:', fontType);
            }
        });
    });

    // 监听配置
    const observerConfig = {
        attributes: true,
        attributeFilter: ['data-font'],
        subtree: true
    };

    // 等待页面加载完成后开始监听
    window.addEventListener('load', () => {
        // 开始监听整个文档
        observer.observe(document.body, observerConfig);
        console.log('Chinese font support enabled');
    });
})();