周末在家帮表妹修手机,苹果她突然问我:"哥,手机我把字体调大了之后淘宝的字体按钮就叠在一起了,你们做开发的样式应用能不能长点心?"这话让我老脸一红,赶紧打开Xcode查代码。调整今天就聊聊我们程序员在字体适配这事儿上踩过的后何坑。
一、保持系统字体怎么把App搞懵的兼容
去年公司App收到条一星评价:"打开就像老年机!"原来用户把系统字体调到了最小。苹果我们的手机设计师是按默认尺寸做的界面,字小了按钮留白多得像空旷的字体广场。
设备 | 默认字体 | 最大字体 | 文字溢出率 |
---|---|---|---|
iPhone 12 | 17pt | 35pt | 68% |
iPhone SE | 17pt | 35pt | 92% |
1. 动态字体那些事儿
记得第一次用UIFontMetrics的样式应用时候,我在代码里写了这么段:
let font = UIFontMetrics.default.scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true
结果测试妹子反馈说有些页面字会"撑破"单元格。调整后来才发现忘了设置lineBreakMode,后何长文本直接冲破了布局防线。保持
二、开发者的字体求生指南
上周隔壁组因为字体适配问题延期上线,CTO在晨会上拍桌子:"以后谁再用固定字号,就去帮客服接电话!"
2. 自动布局的魔法
有次我在登录页面用了UIStackView,配合这些设置才让布局稳如老狗:
- 垂直间距设置≥8pt
- 图片资源提供@2x和@3x版本
- 约束优先级调整到750
适配方式 | 兼容性 | 维护成本 |
---|---|---|
Auto Layout | ★★★★☆ | 中等 |
手动计算 | ★★☆☆☆ | 高 |
三、测试员的秘密武器
测试组老张有台专门用来"找茬"的iPhone,系统设置里存着5套极端字体配置。他们组流传着这样的段子:"能在老张手机里活过3分钟的App,上线绝对稳。"
3. 模拟器实战技巧
在Xcode里按Command+Shift+A调出辅助功能检查器,这几个参数必测:
- 粗体文本开关
- 透明度降低模式
- 深色/浅色模式切换
(本文部分实践参考了《iOS Human Interface Guidelines》和《Dynamic Type in Practice》中的方法论)
窗外的知了还在叫,表妹发来消息说淘宝更新后字体问题好了很多。我放下咖啡杯,在键盘上敲下第1024次字体适配的代码——这次应该能让用户少骂两句了吧。