1. 先分清四个“字体大小”不然调了半天是在调空气说实话这标题看着简单但微信开发者工具里涉及“字体大小”的地方至少有四个彼此之间还完全不互通。我见过太多人包括早期的我自己在“设置”里把编辑器字体调成了 20px回头一看模拟器里页面文字纹丝不动以为是工具出 bug 了气得差点重装。这四个“字体大小”分别是编辑器字体大小只管代码编辑区那块文字属于工具本身的 UI 偏好跟页面渲染没半点关系。模拟器页面字体大小这是小程序页面里文字实际渲染出来的大小由你的 WXSS 代码决定工具设置改不了它。工具整体界面缩放菜单栏、侧边栏、面板这些工具自身界面的缩放比例相当于把整个软件界面放大缩小。手机微信侧字体大小设置用户在微信“我-设置-通用-字体大小”里调的那个它会影响网页、公众号文章但小程序页面默认并不跟着变你要主动适配才能响应。为什么要强调这个因为后面所有“自定义字体大小”的操作第一步是先问自己你要调的是哪个字体写代码费眼要调的是编辑器字体产品说“页面文字太小看不清”要调的是 WXSS 里的字号领导投屏演示看不清楚要调的是工具整体缩放。这三个场景的操作路径完全不同。你抱着“让页面字变大”的目的去调编辑器字体就是典型的缘木求鱼。接下来我按实际开发中的使用频率把这几个“字体大小”一个一个拆开讲清楚。2. 编辑器字体自定义快捷键、菜单与一套我摸索出的舒服配置2.1 入口路径与快捷键先解决最直接的怎么把代码编辑区的字调大。菜单栏路径是“设置 - 外观与字体”这里能同时调字号和行高。字号默认大概是 14px很多常年在多屏间切换的人会觉得偏小。注意“外观与字体”里还有主题色有些人换了深色主题后觉得字发虚不一定是字号问题是字体渲染对比度变了。比菜单更顺手的是快捷键Ctrl/Cmd加号放大Ctrl/Cmd加-号缩小。这跟浏览器缩放页面是一个肌肉记忆但作用对象只是代码编辑区。还有个冷门细节这个快捷键和系统级缩放、输入法快捷键偶尔会冲突。如果你发现按了没反应先看看是不是输入法占用或者直接在“设置 - 快捷键”里重绑一个组合。2.2 字号与行高的搭配逻辑字号调大后如果行高不跟着调代码会觉得“挤成一团”。这里面有个简单的比例行高约等于字号的 1.5 到 1.7 倍看起来最舒服。我自己常用 16px 字号配 1.6 倍行高长时间看代码不累。字体本身也别忽视。中文注释和英文代码混排时中文字体选不好会出现“锯齿感”或“笔画过细”。工具默认字体一般够用但我个人更喜欢把它设置成等宽字体搭配中文字体回退的方案比如JetBrains Mono, Microsoft YaHei, sans-serif实际在工具的字体设置里不一定会让你填这种带回退的字体栈通常只能单选。一个经验是优先选带中文渲染优化的字体比如“Microsoft YaHei”或“PingFang SC”否则满屏英文和符号看着利索一遇到中文注释就发虚。2.3 分享一套我实测过的高分屏配置如果你用的是高分屏比如 2K 或 4K 显示器Windows 150% 缩放下默认字号会显得偏小。我试过几组配置比较推荐这一套场景字号行高主题13寸笔记本自带屏幕14px1.5浅色27寸 2K 屏幕100%缩放16px1.6深色27寸 4K 屏幕150%缩放18px1.7深色外接投影仪演示20px 及以上1.8浅色这里面有个不太容易注意到的点如果你是深色主题字号的视觉感受会比同样字号在浅色主题下“显小”。因为深色背景下浅色文字会有光晕感笔画细的字体会显得发虚。所以深色主题用户不妨比浅色主题多调大 1-2px。3. 页面字体的单位选择rpx、rem、px在三端到底怎么表现说完了工具本身大头来了真正决定页面字体大小的是代码。这里必须先讲清楚单位否则你写的font-size: 24px在 iPhone 15 Pro Max 和 iPhone SE 上看起来完全不是一个比例。3.1 px在手机上的“不等于”很多从 Web 转过来的开发者有个惯性1px 1像素。在微信小程序里px是一个逻辑像素单位它对应的是设备独立像素而不是物理像素。iPhone SE 逻辑宽度是 375ptiPhone 15 Pro Max 逻辑宽度大约是 430pt。同样是font-size: 16px在 SE 上正好占屏幕宽度的约 4.3%在 Pro Max 上占约 3.7%。你说这算不算响应式算但这是“低级响应式”因为比例不对大屏设备的文字相对屏幕反而显得更小。所以小程序里写页面字号不到万不得已别直接用 px 写死。3.2 rpx小程序最常用的相对单位rpx是微信小程序特有的响应式单位核心逻辑是750rpx永远等于屏幕宽度。也就是说无论什么设备屏幕宽度都是 750rpx。设计稿如果是 750 宽的标准稿那设计稿上量到的32px直接写成32rpx就完事。用rpx做字号有天然优势屏幕越宽1rpx 对应的物理像素越多文字会等比放大。这正好解决了上面说的“大屏文字相对变小”的问题。但这里有个坑我踩过rpx做字号时超大屏设备上字会大得有点失控。比如在 iPad 上跑小程序现在支持 iPad 了屏幕宽度变成了 768pt比手机宽了快一倍所有 rpx 字号也跟着等比放大一倍整个排版比例瞬间失衡。3.3 rem 和自定义 vw 方案小程序 WXSS 对rem的支持不像 H5 那么顺手因为rem是相对根节点的font-size你需要自己想办法动态设置根节点字号。常用的做法是在app.js的onLaunch里用wx.getSystemInfoSync()拿到屏幕宽度然后计算一个fontSize挂到 page 根节点上。核心代码大概是这样的// app.js App({ onLaunch() { const info wx.getSystemInfoSync() // 以 375 设计稿为基准屏幕越宽根字号越大 const rootFontSize (info.windowWidth / 375) * 16 wx.setStorageSync(rootFontSize, rootFontSize) } })然后在每个页面的 WXSS 里手动设置根字号/* pages/index/index.wxss */ page { font-size: 16px; /* 这是降级方案 */ font-size: calc(100vw / 23.4375); /* 等价于 16px at 375px width */ }说实话calc(100vw / 23.4375)这种魔法数字可读性太差团队协作时别人根本看不懂你在干嘛。所以我的经验是能用 rpx 就用 rpx只有遇到 iPad 这种极端大屏才考虑引入根字号动态方案。3.4 字号的“黄金分割”取值法给页面定字号时另一个常见问题是“这个字用 28rpx 还是 32rpx”。我总结了一套快速定字号的经验直接按比例来正文28-30rpx次级说明文字24rpx标题34-36rpx大标题/导航栏40rpx 左右最小可读字号20rpx 以下不要用于正文只能用于角标、徽标这类装饰信息这套比例的本质是字号之间的“层极关系”正文、辅助、标题之间倍数差大约在 1.2 到 1.5 倍之间视觉上才显得和谐稳定。如果你写 20rpx 正文、40rpx 标题层级会跳得太突兀像在做大字报。4. 自定义字体文件iconfont/品牌字体在小程序里的正确打开方式有些项目并不仅仅是调大调小系统默认字号而是要引入一套自定义字体——比如品牌字体、设计稿指定的特殊字体或者常见的 iconfont 图标字体。这一步的坑比前面所有加起来都多。4.1 本地字体引用为什么经常失效小程序 WXSS 里写font-face { font-family: MyFont; src: url(/fonts/myfont.woff); }然后给元素设置font-family: MyFont在开发者工具里看一切正常一上真机就变成“豆腐块”或直接回退到系统字体。原因很简单小程序包体有 2MB 主包大小限制而字体文件动不动就 1MB 甚至更大。如果你硬塞进包里提审时直接给你弹出“包体过大”的提示或者真机加载时因分包策略导致字体文件加载不出来。4.2 正确姿势一网络字体 wx.loadFontFace推荐的做法是用wx.loadFontFace动态加载网络字体。这个 API 专门用于在运行时加载字体支持ttf、woff、woff2等格式而且可以指定global: true让整个小程序生效。wx.loadFontFace({ family: MyBrandFont, source: url(https://cdn.example.com/fonts/brand-font.woff2), global: true, success(res) { console.log(字体加载成功, res.status) }, fail(err) { console.error(字体加载失败, err) } })注意几个细节source这里必须用完整 URL且域名需要在公众平台后台配置到“downloadFile 合法域名”里否则真机上会被拦截。开发者工具里可以勾选“不校验合法域名”临时跳过但真机调试没法跳过必须配置真实域名。4.3 正确姿势二iconfont 的取舍图标字体iconfont在小程序里也经常被拿来“自定义字体”但我个人的建议是能用图片/SVG 就别用字体图标。原因有三字体图标加载是整体加载哪怕你只用其中 3 个图标也得下载整个字体文件。字体文件体积大一个 400 个图标的 iconfont woff2 文件动辄 100KB 起步这在小程序里是很大的开销。字体图标的渲染在不同系统上有兼容差异Android 部分低端机上偶尔会出现图标偏移或者“方框”问题。如果你执意要用 iconfont建议用iconfont.cn的“批量选择”功能只选需要的图标再下载文件越小越好。真机加载前用工具压一遍像fontmin这类工具能把用不到的字符全部剔除。4.4 字体格式与跨端兼容微信小程序的字体兼容和 Web 略有不同核心差异在于格式iOSAndroid开发者工具ttf / otf支持部分支持支持woff支持支持支持woff2支持iOS 9支持Android 5支持所以最稳的方案是优先使用 woff2 格式体积小且两端兼容性最好。如果你手里只有 ttf建议先用在线压缩工具转成 woff2 再走wx.loadFontFace。另一个容易忽略的点是字体字重font-weight。很多中文字体只有 Regular 和 Bold 两个字重你却给某个标题设置了font-weight: 500系统会强行用算法合成“伪粗体”在部分 Android 机上渲染会出现明显的“糊字”。解决方案是用font-family指定不同字重对应的不同字体文件比如font-family: MyFont-Light; /* 标题 */ .title { font-family: MyFont-Bold; }说白了小程序的自定义字体是个“用网络换体积”的活凡是牵涉到字体文件优先走远程加载别让它占包体。5. 一套可以直接抄走的全局字体适配方案聊了这么多基础来点实战的。下面这套方案是我在几个中大型小程序项目里打磨过的同时解决了三件事字号跟随屏幕自适应、用户可以手动调大调小、特殊场景如老人模式下整体放大。5.1 第一步设计稿基准确认设计稿如果不是 750 宽先做换算。比如设计稿是 375 宽那16px设计字号对应小程序里的32rpx。我习惯在项目根目录建一个docs/design.md把这套换算规则写清楚防止 UI 来回改稿时换算出错。换算公式很简单rpx 设计稿px * (750 / 设计稿宽度)例如设计稿 375 宽一个 24px 的标题字号对应的 rpx 是24 * (750 / 375) 48rpx5.2 第二步全局字号变量WXSS 原生不支持变量其实支持的。小程序 WXSS 从基础库 2.4.0 开始支持 CSS 自定义属性CSS Variables用法跟 Web 一样。在app.wxss里定义全局字号变量/* app.wxss */ page { --font-size-body: 28rpx; --font-size-secondary: 24rpx; --font-size-title: 36rpx; --font-size-large: 44rpx; --font-size-mini: 20rpx; }然后页面里这样用.content { font-size: var(--font-size-body); } .secondary { font-size: var(--font-size-secondary); }好处是什么当产品经理说“正文再大一点”的时候你只需要改app.wxss里的一个变量全站正文全部跟着变。不用翻遍数十个页面的 WXSS 逐个找font-size也不会漏改。5.3 第三步用户侧字体缩放适配小程序默认不响应微信的“字体大小”设置但你可以主动访问它。用wx.getSystemInfoSync()能拿到一个fontSizeSetting字段它表示用户当前设置的微信字体大小比例正常是 1。const info wx.getSystemInfoSync() const fontSizeSetting info.fontSizeSetting || 1然后把这个比例存到全局或者 Storage页面的根节点字号统一乘上它// 以 rpx 为单位的值没法直接乘所以采用替换 CSS 变量的方式 if (fontSizeSetting ! 1) { wx.setStorageSync(fontSizeScale, fontSizeSetting) }在 WXSS 中CSS 变量不支持直接用 calc 乘一个任意系数其实 css 的 calc 不支持乘法所以更实用的做法是在app.js里根据比例拼出新的字号变量写入根节点 style。听起来复杂但最终实现的代码其实很短// app.js 或页面 onLoad 中 const scale wx.getStorageSync(fontSizeScale) || 1 const bodySize Math.round(28 * scale) const secondarySize Math.round(24 * scale) const titleSize Math.round(36 * scale) const style --font-size-body: ${bodySize}rpx; --font-size-secondary: ${secondarySize}rpx; --font-size-title: ${titleSize}rpx; // 每个页面通过 setData 绑定到 page 节点的 style 上有了这套机制用户在微信里把字体调到“大”或“特大”你小程序里的文字也会跟着放大。对阅读类、资讯类、适老化产品特别有用。5.4 第四步最小可读字号兜底自适配方案最容易翻车的地方是用户把微信字体调到“特大”后小标签、角标这些元素也被放得巨大布局直接崩掉。我加了一个“兜底策略”对关键信息以外的装饰性文字不用 CSS 变量而是直接用固定 rpx 值。.badge { font-size: 20rpx; /* 不受全局缩放影响 */ }这样做的代价是这类文字不会跟随用户字体设置缩放但对角标、徽标来说其实无所谓——没人会盯着一个红色的“NEW”小标去调字体大小。核心内容跟着缩放大非核心装饰元素保持稳定这个“主次分离”的思路才是适配方案里真正的精髓。6. 那些绕不开的周边排雷缓存、测试版本与登录绑定6.1 改完字号不生效先别怀疑代码这是新手问得最多的一个问题字号明明改了工具栏编译也成功了模拟器里就是没反应。第一嫌疑是WXSS 缓存。开发者工具的老版本偶尔会有样式缓存 bug特别是你只改了app.wxss里的公共样式时。解决方案很简单菜单栏“工具 - 清除缓存 - 清除文件缓存”再重新编译。如果还不行连“清除数据缓存”也别放过。第二嫌疑是编译模式缓存。如果你的页面是分包页面而当前编译模式指向的是主包入口修改分包样式后可能不会自动触发分包重新编译。在“普通编译 - 添加编译模式”里重新选一次目标页面路径强制刷新。第三嫌疑才轮到代码问题比如选择器优先级被覆盖了。排查方法也很直接打开调试器的 WXML 面板选中元素看 Computed 样式里font-size到底是哪条规则在生效。这一步能解决 90% 的“改了没生效”问题一定要学会看。6.2 上传版本如何设置成测试版体验版注意这里说的是“把上传版本设置成测试”在微信开发者工具里这个叫“体验版”。流程是这样的开发者工具右上角“版本管理”里点“上传”填上版本号和备注然后到微信公众平台后台“管理 - 版本管理 - 开发版本”里找到刚上传的版本点“选为体验版”。实测中有一个常见卡点上传后公众平台里看不到那个版本。这种情况大概率是当前工具的登录账号不是该小程序项目的管理员或开发者。上传操作本身需要具有开发者权限但“选为体验版”操作需要管理员或具有相应权限的运营者才能操作。6.3 登录时提示“微信号未绑定公众号”还有一个极高频的报错“当前登录的微信号未绑定公众号无法使用该功能”。这个“公众号”其实很多时候指的就是小程序微信的开发者体系里小程序和公众号的“绑定”叫“添加成员”。需要管理员登录公众平台在“成员管理 - 项目成员”里把你微信号添加进去并赋予“开发者”权限。添加之后一般等一两分钟再回开发者工具点“登录”就能正常进入项目了。这里有个经验公司内部多人协作时新同事入职后经常卡在这一步但管理员并不一定立刻有空操作后台。应急办法是让管理员把项目成员权限开了之后新同事完全退出微信开发者工具并重新打开。有时候工具不会自动刷新登录态重启一次最省事。6.4 安装过程中的两个隐藏陷阱最后补充一个关于“微信开发者工具 安装”的细节。官方下载页面分稳定版、RC 版、Nightly 版普通开发用稳定版就行RC 版是预览新功能用的Nightly 版则极其不稳定别在生产项目上用。安装时还有一个容易踩的坑安装路径不要带中文或空格。你是不是觉得无所谓反正你天天用但工具在构建时会调用内部编译进程对路径极其敏感中文路径下偶尔会出现莫名其妙的编译失败、文件加载失败查半天查不出原因。换到纯英文路径后世界清净了。还有一个是防火墙拦截工具首次运行时需要联网校验登录态和拉取基础库公司内网或开启了严格防火墙的情况下可能出现“一直转圈登录不进去”的情况。把微信开发者工具加入防火墙白名单同时确认代理设置正常工具里“设置 - 代理”一般选“使用系统代理”就行。写在最后字体大小这件事本质是“体验颗粒度”的问题我在早期做小程序时也以为字体大小就是一个font-size属性后来被现实反复教育工具界面字、页面单位、字体文件、用户偏好、版本管理、登录权限……每一样都在影响“最终用户看到的字长什么样”。整个项目里最值得投资的其实是第一件事把“四个字体大小”彻底理解清楚。之后再遇到产品说“字调大点”你能在十秒内判断出他说的到底是哪个“字”然后精准修改而不是一脸懵地打开设置面板乱调一遍。如果你正在做一个阅读类、工具类或者面向中老年用户的小程序强烈建议直接采用第 5 节的全局字号变量 用户缩放适配方案。它不会让你的代码变复杂多少但对用户体验的提升是看得见的。我自己把这套方案落地后最明显的变化是测试群里再也没人发“字太小看不清”的截图了。字体大小看着是个小功能但做好了对留存和好评的影响远比想象中大。