圈圈之地

klimaks.zip: (1.16 MiB) 已下载 1 次

cc-superhuman.zip: (20.05 KiB) 已下载 2 次

neu5land.zip: (161.8 KiB) 已下载 2 次

akshar-unicode.zip: (775.18 KiB) 已下载 2 次

sora.zip: (797.29 KiB) 已下载 3 次

seraphine.zip: (23.35 KiB) 已下载 2 次

zt-nature.zip: (152.26 KiB) 已下载 2 次

kineks-round.zip: (364.33 KiB) 已下载 3 次

ejsoon 写了： 2025年 12月 14日 21:31test

app回覆轉跳應該沒有問題了。@圈宝

搞不懂哪裡可以畫圖。

test回覆完之後，界面跳了好幾下，請問這是必要的嗎？

ejsoon 写了： 2025年 12月 14日 22:36 test回覆完之後，界面跳了好幾下，請問這是必要的嗎？

由于phpbb是纯后端渲染好HTML返回的，目前app是靠解析网页，这涉及到加载新网页，然后最后那一跳，主要用于将主界面定位至最新的帖子。

有重写phpbb换新论坛程序的想法，需要一些时间琢磨琢磨。

圈宝写了： 2025年 12月 14日 23:00 由于phpbb是纯后端渲染好HTML返回的，目前app是靠解析网页，这涉及到加载新网页

為什麼不直接從數據庫裡拿數據？

ejsoon 写了： 2025年 12月 15日 00:57 為什麼不直接從數據庫裡拿數據？

鉴权，还有数据结构很麻烦。直连数据库也不安全。

在一個文件夾裡面有幾個字體文件，可能是.ttf或.woff2等格式。

現在要寫一個html+css+js程式：

最上方有ejfonttesttextarea.textarea和調節字體大小的滑塊，字體大小也允許輸入，其左方和右方也有點擊遞增或遞減。
ejfonttesttextarea.textarea默認有一句話包含二十六個大寫、小寫字母，常用英文標點和數字。
字體大小默認是16px。

下方是一系列字體的展示，包含h2{字體名稱}，div.ejfonttestdisplay{上面的textarea內容}。
div.ejfonttestdisplay顯示的是套用字體的文字內容以及字體大小，如果前面的內容和字體大小發生變動，它也會隨著變動。

在css或js中寫好代碼規範，以方便增減字體。找到一種最適合增減字體的方式。

全部代碼寫在一個.html中，所有代碼都要使用英文。

grok

代码：全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Test</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        .ejfonttesttextarea {
            width: 100%;
            height: 100px;
            font-size: 16px;
            margin-bottom: 20px;
        }
        .size-controls {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .size-controls button {
            width: 30px;
            height: 30px;
            font-size: 20px;
            margin: 0 10px;
        }
        .size-controls input[type="range"] {
            width: 200px;
            margin: 0 10px;
        }
        .size-controls input[type="number"] {
            width: 60px;
            text-align: center;
        }
        .font-section {
            margin-bottom: 40px;
        }
        .ejfonttestdisplay {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <textarea class="ejfonttesttextarea">The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?</textarea>
    <div class="size-controls">
        <button id="decrease-size">-</button>
        <input type="range" id="font-size-slider" min="8" max="72" value="16">
        <input type="number" id="font-size-input" min="8" max="72" value="16">
        <span>px</span>
        <button id="increase-size">+</button>
    </div>
    <div id="font-displays"></div>

    <script>
        // Define fonts here for easy addition/removal
        // Each object has 'name' (font-family name) and 'file' (path to font file, assuming in same folder)
        const fonts = [
            { name: 'Font1', file: 'font1.ttf' },  // Replace with actual font files/names
            { name: 'Font2', file: 'font2.woff2' },
            // Add more fonts like: { name: 'Font3', file: 'font3.otf' },
        ];

        // Dynamically inject @font-face rules
        const styleSheet = document.createElement('style');
        fonts.forEach(font => {
            styleSheet.innerHTML += `
                @font-face {
                    font-family: '${font.name}';
                    src: url('${font.file}');
                }
            `;
        });
        document.head.appendChild(styleSheet);

        // Get elements
        const textarea = document.querySelector('.ejfonttesttextarea');
        const slider = document.getElementById('font-size-slider');
        const input = document.getElementById('font-size-input');
        const decreaseBtn = document.getElementById('decrease-size');
        const increaseBtn = document.getElementById('increase-size');
        const displaysContainer = document.getElementById('font-displays');

        // Function to generate or update font displays
        function updateDisplays() {
            const text = textarea.value || 'Default text';
            const size = input.value + 'px';

            // If displays don't exist, create them
            if (displaysContainer.children.length === 0) {
                fonts.forEach(font => {
                    const section = document.createElement('div');
                    section.className = 'font-section';
                    section.innerHTML = `
                        <h2>${font.name}</h2>
                        <div class="ejfonttestdisplay" style="font-family: '${font.name}'; font-size: ${size};">${text}</div>
                    `;
                    displaysContainer.appendChild(section);
                });
            } else {
                // Update existing displays
                const displayDivs = document.querySelectorAll('.ejfonttestdisplay');
                displayDivs.forEach(div => {
                    div.textContent = text;
                    div.style.fontSize = size;
                });
            }
        }

        // Initial update
        updateDisplays();

        // Event listeners for changes
        textarea.addEventListener('input', updateDisplays);

        // Sync slider and input
        slider.addEventListener('input', () => {
            input.value = slider.value;
            updateDisplays();
        });
        input.addEventListener('input', () => {
            let value = parseInt(input.value, 10);
            if (isNaN(value)) value = 16;
            value = Math.max(8, Math.min(72, value));
            input.value = value;
            slider.value = value;
            updateDisplays();
        });

        // Buttons for increment/decrement
        decreaseBtn.addEventListener('click', () => {
            let value = parseInt(input.value, 10) - 1;
            value = Math.max(8, value);
            input.value = value;
            slider.value = value;
            updateDisplays();
        });
        increaseBtn.addEventListener('click', () => {
            let value = parseInt(input.value, 10) + 1;
            value = Math.min(72, value);
            input.value = value;
            slider.value = value;
            updateDisplays();
        });
    </script>
</body>
</html>

哪個網站可以把.ttf或.otf在線轉成.woff2？並可以挑選和刪除字符？

以下幾個在線網站可以將 **.ttf** 或 **.otf** 字體轉換成 **.woff2**，並支援**子集化（subsetting）**，即允許你挑選需要的字符或刪除不需要的字符，以減小檔案大小：

1. **Transfonter**（https://transfonter.org/）
- 最推薦的工具之一。
- 上傳 ttf/otf 後，可以選擇轉換成 woff2（同時支援多格式）。
- 有「Subset」選項，你可以輸入自訂文字（custom text），工具只保留這些文字中用到的字符（glyphs），有效刪除多餘字符。
- 還會自動生成 @font-face CSS 代碼和 demo 頁面，非常適合網頁開發者使用。

2. **AnyConvert TTF to WOFF2**（https://anyconvert.to/ttf-to-woff2）
- 專門支援 ttf 到 woff2 轉換，並內建進階子集化功能。
- 可以選擇字符範圍（character ranges）、語言集，或輸入自訂文字來保留特定字符，刪除其餘的。
- 轉換後檔案可縮小 30-95%，適合優化網頁字體。

3. **Infyways Font Converter**（https://www.infyways.com/tools/font-converter/）
- 支援 ttf/otf 到 woff2 轉換。
- 明確提到支援「font subsetting」，可以只包含需要的字符來減小檔案大小。

4. **Aspose Font Subsetter**（https://products.aspose.app/font/generator/ttf-to-woff2）
- 專門的 ttf 到 woff2 子集工具。
- 你可以指定需要的 glyphs，只生成包含這些字符的 woff2 檔案。

其他工具如 Fontsource 或 CloudConvert 可以轉 woff2，但子集化功能較弱或沒有自訂挑選字符的選項。
如果需要更精細控制（如基於網站內容自動子集），建議用 Transfonter 或 AnyConvert，最簡單上手。轉換時注意字體授權，避免侵犯版權。

sorafontcss.7z: (9.65 KiB) 已下载 5 次

圈圈之地

正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg

Re: 正在尋找開源，精簡，美觀的英文字體，用途是嵌入svg