如何用CSS与@font-face在Scratch中使用自定义字体及代码合并问题

一、如何使用CSS和@font-face在Scratch中应用自定义字体？ #

Scratch本身不支持直接添加自定义CSS，但可以通过浏览器开发者工具注入样式实现。结合你提供的代码，具体操作如下：

1. 注入自定义字体的CSS规则 #

打开Scratch编辑器后，按F12调出开发者工具，在「控制台」执行以下代码，或者在「样式」面板中添加这段CSS：

@font-face {
    font-family: JuneBug;
    src: url('https://raw.githubusercontent.com/grannygamer777/DerpFont/main/my%20derp%20handwriting.ttf');
}

/* 强制给Scratch的文本编辑框应用自定义字体 */
.paint-editor_text-area_27Ci4 {
    font-family: JuneBug, Arial, Helvetica, sans-serif !important;
}

2. 直接修改文本框的内联样式（可选） #

如果不想写全局样式，也可以在开发者工具「元素」面板找到对应的textarea，双击它的style属性，把font-family替换为包含自定义字体的列表：

<textarea
    class="paint-editor_text-area_27Ci4"
    spellcheck="false"
    style="font-family: JuneBug, Arial, Helvetica, sans-serif; font-size: 40px; line-height: 1.2; display: initial; transform-origin: 0px 36px; transform: matrix(0.5, 0, 0, 0.5, 48.35, 59.25); width: 256.645px; height: 48px;"
></textarea>

二、如何从头制作自定义字体？ #

1. 确定风格与草稿 #

先明确字体风格（比如手写体、复古衬线体等），在纸上或绘图软件（如Illustrator、Photoshop）绘制字符草稿，确保字符大小、基线对齐一致。

2. 使用字体制作工具 #

选择合适工具将草稿转化为字体文件：

• FontForge（免费开源）：导入矢量格式字符，调整间距、基线等参数，支持导出TTF/OTF格式。
• Calligraphr（在线工具）：上传手写字符扫描件/图片，自动生成字体轮廓，适合快速制作手写体。
• Glyphs（付费）：专业级工具，功能强大，适合精细调整字体细节。

3. 编辑与优化 #

在工具中逐个调整字符形状、大小，设置统一的基线、字距和行距，测试常见字符（字母、数字、标点）的显示效果，避免错位或重叠。

4. 导出与测试 #

导出为TTF/OTF格式，在不同软件（如浏览器、Word）中测试显示效果，修复笔画断裂、显示异常等问题。

内容的提问来源于stack exchange，提问作者epiccoderorsomethingidkman