遇到问题
上个月在开发淘票票专业版过程中,我们遇到了一个奇怪的问题:
H5容器里的汉字被显示为一些奇怪的样子。
首先:
1)这个问题不能准确复现,同型号同系统的两台 iPhone 6s Plus 有一台会出现;
2)不确定是否在 Android 上出现;
3)如果出现问题,重装 APP 则有可能恢复正常。
介绍下出问题的环境:
目前只在 iOS 系统中复现,H5 使用 Windvane 容器
真机不好调试,模拟器不能准确复现,暂时不知如何进行了。
跳进了一个坑
以为是简繁体问题,打开输入法看看繁体「票房」怎么写,似乎并不是繁体字:
直到项目进入了测试用例编写阶段,我发现 Aone 上能准确复现这个字体问题,如图。
马上打开 Chrome 进行调试,看到了一个陌生字体:AppleGothic
上字体网站预览 AppleGothic 效果:
确实和截图里的字体非常相似。知乎搜索 AppleGothic ,其中有一条:
/System/Library/Frameworks/ApplicationServices.framework/Frameworks/CoreText.framework/Resources/DefaultFontFallbacks.plist
对应日/韩/简/繁分别是 AquaHiraKaku/AppleGothic/STHeitiSC-Light/STHeitiTC-Light。
于是几天时间一直在搜索相关资料,仍然无解。
跳出坑
开始想到是 iOS 系统字体显示的优先级问题,在「设置-通用-语言与地区」可以看到。找到几台复现问题的机器查了显示顺序发现,首选语言均是「简体中文」、「繁体中文」、「English」,不太可能显示「韩文」。
到底哪里出了问题?
我又拿出截图逐个对比了下字体,很明显「排片」俩字的显示效果不一致:
问题仍然没解决。
定位问题
回到起点,几乎没有任何进展。
无奈,从代码层面分析:
影响文字显示的主要是:
- 系统语言与区域设置;
- 浏览器字体顺序设置;
-
font-family
属性; - lang 属性。
排除 1、2 不可改变因素,定位到第3、4点,发现问题:
其中第3点,我们选择 reset 的 CSS 重置方案,body 节点设置了:
font-family: 'Helvetica Neue', sans-serif;
字体栈设置了 Helvetica
和 「非衬线」字体族,如果是中文字体,Helvetica
默认 Fallback 到下一字体,而下一个字体 sans-serif
则根据系统设置进行渲染。iOS 系统里对于中文字体默认使用 「PingFang」,简体为「PingFang SC」,繁体为「PingFang TC」。
联系客户端同学帮忙查了下 APP 区域设置,默认为 en-US
。
这一点我不太确定:
「如果 html 文档没有设置语言区域,会从浏览器或系统环境取到当前所在区域的字体作为显示字体」
第4点,容器没有找到 lang ,且检测到当前环境为 en
,而文档内容是「汉字」,则默认在「简」、「繁」的「PingFang」中选择,如:
font-family: 'Helvetica Neue', 'PingFang SC';
font-family: 'Helvetica Neue', 'PingFang TC';
预览「PingFang TC」字体:
确实完全匹配。
解决
上面提到的第 4 点,结合定位的 font-family
问题,主要有两种解决方案。
- 设置
lang
- 设置
PingFang SC
操作第二点,局限性比较大。因为仅针对一种字体进行设置,如果未来引入了新字体,则同样会出现这个问题;
我比较倾向于设置 lang
属性解决:更新 html 的 <html>
标签为 <html lang="cmn-Hans">
,使浏览器默认使用普通话的简体中文作为显示语言进行渲染。
对于 lang 属性的最佳实践,可以参考:BCP 47
取值顺序:language-extlang-script-region-variant-extension-privateuse
来自:https://www.w3.org/International/articles/language-tags/
发布到预发环境下连续测试了一周,问题没有复现,基本可确定问题解决。
附
对于 lang 属性的设置,过去我们一直设置为 zh-cmn-Hans
,查阅了 IANA:
Type: redundant
Tag: zh-cmn-Hans
Description: Mandarin Chinese (Simplified)
Added: 2005-07-15
Deprecated: 2009-07-29
Preferred-Value: cmn-Hans
已被标记为「不推荐使用」,需要调整为「cmn-Hans」。如果为了兼容,可以加上「zh-」:「zh-cmn-Hans」
参考
- IANA language-subtag-registry
- IETF BCP 47
- W3C language-tags
完