排查土耳其文显示异常的问题。
发现问题
适配同学反馈某个设备在土耳其环境下无法显示部分字符,出现乱码:
因为自测机能显示出来,且异常字符主要是ğ
和ş
,所以一开始怀疑是设备字符集不全导致。而心细的产品又发现虽然其他设备能显示这两个字符,可是又明显和旁边的其他文本字体不一致,略大一点:
于是又找了几个测试机,确实存在要么显示乱码要么显示偏大,看来并不是单机而是共性问题。
定位原因
在上次排查BUG|Flutter Text组件和国际化时了解到字体也会影响UI显示,所以第一步想先看下是否和字体相关。项目里引用的字体就是常用的TTF格式,打开这个字体表:
通过官方介绍文档可知,TTF文件由多张表组成,在文件头部先有一张Font Directory
目录文件记录有多少表格以及它们的长度、起始位置等信息:
紧接着目录文件就是各个Font Tables
,关键表格是这几个:
其中,核心的glyf
表就是描述一个字符是如何绘制的,包括制定描述构成轮廓的轮廓点和网格匹配该字形的指令。比如这个AgencyFB
字体的ç
字符:
靠肉眼查二进制文件效率很低,这里使用解析工具opentype.js可以快速看到İ
、Ş
、Ğ
、ş
、ğ
这几个土耳其特殊字符都找不到导致显示不出来;而其他设备能展示出来的只是系统默认字体,所以和规定字体看起来不一样。
解决办法
明确了是字体问题,解决办法就是联系设计同学来提供更完备的字体文件。Agency FB 多了298-302这几个土耳其字符:
总结
事实上,可能不止是土耳其这几个字符缺失,参考Google提供的一个声称是Global Font的字体Noto Sans
足足包括了3700个字符。因此海外产品在引用自定义字体时,要考虑到字体支持的字符集是否满足当前地区所需。