对HTML标准的思考 - 记解决H5随机显示简繁体汉字问题-CSDN博客

遇到问题

上个月在开发淘票票专业版过程中，我们遇到了一个奇怪的问题：

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」

参考

完