Scratch二次开发#3——自定义GUI文本_scratch调整字体大小-优快云博客

        正则表达式（Regular Expression，简称 Regex 或 RegExp）是一种用于匹配、查找、替换字符串中特定模式的工具。

        你可以把它理解为一种 “文本搜索语言”，它用预定义的符号和规则来描述你想要匹配的字符串结构，从而让程序能够自动处理文本数据。

        正则表达式是一种强大的文本处理工具，广泛应用于编程、数据清洗、日志分析等领域。虽然它的语法看起来有些复杂，但掌握了基本的元字符和规则后，可以极大地提高文本处理的效率。

关于正则表达式的详细知识需要自行学习哦~（可以问问AI）

`font-size: {小数}rem`这种格式的正则表达式为`font-size:\s*(\d+\.?\d*|\.\d+)rem`。

打开IDE查找替换工具并启用正则表达式。

输入正则表达式`font-size:\s*(\d+\.?\d*|\.\d+)rem`查找对应代码。

根据文件路径、文件夹名（可以让AI帮助分析英语）判断是控制哪部分文本的代码。

双击打开对应文件，自行修改。

比如菜单栏中按钮上的字体大小：

改为`.95rem`后在浏览器重新加载：

.95rem有点丑，这里主要是为了对比明显一点，所以设置的比较大，大家可以自行修改喜欢的值。

补充知识点：

rem 是 CSS 中的相对长度单位，核心是 “相对于根元素（<html>）的字体大小” 来计算实际尺寸。

核心定义

rem 是 “Root EM” 的缩写，“Root” 指 HTML 根元素，“EM” 是传统相对单位（相对于父元素字体大小）。
计算逻辑：1rem = 根元素（<html>）的 font-size 数值（默认情况下，浏览器根元素字体大小是 16px，所以 1rem = 16px）。

实际使用场景

示例 1：若设置 <html style="font-size: 16px">，则 font-size: 1.5rem 等价于 24px（16×1.5）。
示例 2：若根元素字体大小设为 20px，则 width: 3rem 等价于 60px（20×3）。

核心优势

响应式适配：修改根元素字体大小（可通过媒体查询或 JS 动态调整），所有用 rem 定义的尺寸会同步缩放，适配不同屏幕（如手机、平板）。
统一控制：全局只需调整根元素字体，就能批量修改页面所有元素大小，比 px 更灵活。
支持用户浏览器的字体大小设置（如用户放大系统字体，rem 元素会同步放大）。

2、“积木分类区”中的字体大小

修改为0.85rem后在浏览器中重新加载：

3、“功能分类区”中的标签字体大小

改成0.95rem后在浏览器中加载：

4、“角色区”中的字体大小

4.1 角色列表区的角色名字字体大小

改成0.825rem后在浏览器中加载：

4.2 “角色属性区”的属性标签字体大小

Tips：注意文件名是`label.css`。

这个地方其实是影响全局的，所有`label`标签的字体大小都会变化。

改成0.825rem后在浏览器中重新加载：

4.3 “角色属性区”的属性值字体大小

Tips：注意文件名是`input.css`。

这个地方其实是影响全局的，所有`input`输入的值的字体大小都会变化。

改成0.825rem后在浏览器中重新加载：

5、“舞台区”的字体大小

5.1 标题字体大小

修改为0.825rem后在浏览器中重新加载：

5.2 “背景”标签字体大小

修改为0.8rem后在浏览器中重新加载：

Tips：这里只影响了“背景”这两个字，那个数字“1”是没有受影响的。

想改的话去`.label`上面的`.count`部分修改font size即可。

修改GUI中不同区域的文本内容

与【Scratch二次开发#2——自定义菜单栏】中修改按钮文本一样，只要找到对应的中文翻译，修改翻译即可。

1、修改角色区的“角色”为“角色名”

中英文语境不同，我个人觉得角色名会更清晰易懂，大家也可以自己查找其它想修改的地方。

我们之前已经使用了IDE的全局查找功能，结合正则表达式找到了各个字体大小的控制代码。

这里同样可以使用IDE的全局查找功能查找包含“角色”的代码。

角色区的文本“角色”：

细心的同学应该注意到了，这个文件是`scratch-l10n-master\editor\interface\zh-cn.json`。

我们之前修改按钮文本也是在这里修改的。

由于是`scratch-l10n`部分的内容，不是`scratch-gui`部分的代码，所以修改后不能直接生效。

需要重新编译修改后的`scratch-l10n`部分。

另外打开一个终端管理员，移到`scratch-l10n-master`:

执行`npm run build`命令。

npm run build

成功编译：

由于我们在【Scratch二次开发#2——自定义菜单栏】中已经成功把`scratch-gui`和`scratch-l10n`链接（link）了，所以这边编译完后直接回浏览器中重新加载就可以看到效果了。

2、修改菜单栏中的“Debug”为“程序调试小技巧”

使用IDE的全局查找功能查找包含“Debug”的代码，打开区分大小写、全词匹配。

所有种类的语言都没有翻译这个单词（里面的内容也没有翻译）。

可能是因为Debug是编程中的通用概念。

但是我个人感觉中国少儿编程机构中的交流氛围中几乎不会用到这个词。

所以还是翻译为中文对小朋友们更友好。

我只翻译简体中文部分：

修改为“程序调试小技巧”后在`scratch-l10n`源码目录下重新编译。

npm run build

编译成功：

回到浏览器中重新加载：

留个坑：有时间的话我会把里面的内容翻译一下，教程写在这里。【】

3、修改菜单栏中的“编辑”为“小工具”

我想破脑袋也想不出这和编辑有什么关系，为什么要叫Edit，中英文语境真的差很多。

这有一些AI推荐的翻译，大家有更好的翻译也可以在评论区分享一下。

编辑作品

贴合孩子认知：Scratch 里的 “Project” 对孩子来说是自己做的 “作品”（动画、游戏等），“编辑作品” 能直接让他们明白这是 “修改自己做的作品”；

匹配按钮场景：这个按钮是针对 “Scratch Project” 的操作，“编辑作品” 既明确功能，又不会像 “编辑项目” 那样偏正式，更符合孩子对自己创作的称呼。

作品小操作

理由：“作品” 贴合孩子对自己项目的称呼，“小操作” 直白点出按钮功能（复原角色、开加速都是对作品的小操作），口语化且亲切，孩子能快速理解 “点这里可以做些调整”。

功能选项

理由：两个功能（复原、加速）本质是项目的辅助功能，“功能选项” 简洁明了，让孩子知道这里有可以用的小功能，比 “编辑” 更贴合实际作用。

项目小功能

理由：“项目” 对应 Scratch 的 “Project”，“小功能” 突出按钮里的工具属性（复原角色、加速都是帮助项目运行的小功能），孩子能联想到 “这里有帮我调整项目的工具”。

操作助手

理由：带点趣味感，“助手” 让孩子觉得这个按钮像小帮手，能帮自己恢复误删的角色、让项目跑得更快，弱化 “操作” 的严肃感，更符合儿童语境。

小工具

理由：极度简洁，孩子对 “工具” 的认知很直观（像修东西的小工具），能联想到 “这里有帮我恢复角色、让程序变快的工具”，适合按钮空间有限的场景。

作品助手

理由：“助手” 带亲切感，孩子会觉得这个按钮像小帮手，能帮自己解决 “不小心删了角色” 或 “程序跑得慢” 的问题，比 “操作” 更有温度。

调整小功能

理由：“调整” 直接点出功能本质（恢复角色是调整内容，加速是调整运行状态），“小功能” 强调轻量实用，孩子能快速理解 “这里可以调一调我的作品”。

操作小面板

理由：“面板” 暗示这里是集中功能的地方，“操作” 对应具体动作（复原、开加速），比 “选项” 更有动手感，适合稍大一点的孩子理解。