前端生僻字显示

异名在一个游戏项目中遇到一个比较有意思的问题，在游戏的玩法设定中，当怪物在消失的时候会爆出一个中文字，这个效果在部分机型上会出现乱码符号

显示乱码的原因

一开始还以为是字符太多了，char的纹理不够用了，还尝试过手动调用游戏引擎的cc.Label.clearCharCache去清除；后来才认识到是生僻字的问题，这得从字符编码说起，Unicode为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求，其中：

❝

3400～4dffh：是中日韩认同表意文字扩充a区，总计收容6,582个中日韩汉字
4e00～9fffh：是中日韩认同表意文字区，总计收容20,902个中日韩汉字

❞

通常情况下，我们日常所用到的中日韩非符号字符都会落在3400-9fff这个编码区间，因此当我们需要判断某一个字符是否是属于汉字的时候，就可以通过查看它的的Unicode编码是否落在这个区间，我们写一个正则去检查一下上面两个字符👇：

可以看到第二个字它并不处于常用汉字的编码区间，它是生僻字，生僻字的使用频率很低，我们日常高频用的的汉字其实也就是几千个而已。字体公司设计汉字字体的成本比较高，因为如果要设计一款英文字体，那就只要设计26个字母就可以组合出所有的单词了，而每一个汉字则几乎都需要人工去做造型，生僻字的造字性价比可见有多低，可以说每一款汉字字体都是收录残缺，缺多缺少而已。所以这就解析了为啥在华为的手机上为啥看到的是乱码而在苹果手机上却能正常显示该字符，因为他们的系统字体库不同，华为的字体库没有录用这个生僻字

解决方法

在前端要解决生僻字的显示问题可以利用css的font-family 的字体备选机制，可以把这个生僻字单独做成一个字体文件，然后通过@font-face 嵌入，然后在需要的地方引用，浏览器在解析文字的时候会逐字匹配，当字体上没有这个字符的时候就会在备用的字体上选择，从而能够让我们的生僻字被显示出来，一般生成单字体文件有这几种方式：

字体切割

如果你缺失的还不算太生僻，可能在某些字体库中收录了这个字，那就可以通过字蛛或者fontmin这些字体提取方案把这个字单独提取出来，作为单字体文件引用

icon font

让设计师单独针对这个生僻字做设计然后生成icon font，可以直接上传阿里的iconfont，然后再下载代码，默认会给到Unicode、Font class、Symbol三种引用方式

专用的字体信息网站

有一个日本的字体信息网站glyphwiki.org，支持检索，甚至可以通过偏旁部首拼凑生僻字，也非常方便

位图字体

当然在游戏中，更常见的方式是使用位图字体，位图字体由 fnt 格式的字体文件和一张png图片组成，fnt文件提供了对每一个字符小图的索引，这种格式的字体可以由专门的软件生成，异名用的是shoebox。因为位图字体是一个符号和图片的索引文件，所以我们可以把某个场景下具有特色的字体都单独做设计，当然也可以应用在生僻字的显示中：

这个也是异名最终使用的方案，你永远不知道你的下一个游戏背景设定是什么，万一是山海经里面的远古神兽或者是像异名这种学科游戏里面的奇葩新造字，或者能够给大家带来一点参考。

不可靠的String.length

以上就把需求解决完了，但是异名在踩坑的过程中还发现一个有趣的事情：

字符串的length属性是多么的不可靠！而且更有意思的是，String.length的长度不是2吗，但是如果你用不同的方式去遍历，你还会发现一些更神奇的事情：

异名看到这个执行结果的时候是挺惊讶，而且这个怪异表现可能还会和我们的日常工作产生交集。相对于汉字，我们更经常遇到的问题可能是emoji，比如某天产品经理有个需求，用户的姓名输入框要做一个长度限制，长度不能超过十，你说简单啊，利用length做一下校验，长度超过十的就拦截了。然后测试同学，啪啪啪输入五个💩...

这个需求相信大部分前端都有遇到过，用length去判断是不可靠的，为什么呢？因为在字符编码上，有好几种方式可以用来表达字符：

💩可以是一个字符，但是也可以用两个字符来表达，所以你就不能奢望String.length能给到你一个可靠的结果了。这个时候我们回头看一眼MDN上对String.length的描述，你就会发现人家一开始就说了，我不可靠...

那有没有一种可靠的方法能够准确统计字符串的长度呢，我上面举了Array.from的例子，它正确返回了字符的长度，但是它也只是一个有缺陷的方案，它对某些字符有效

有兴趣的同学可以点击原文跳转，在原文那里，异名贴了两篇参考文章，他们进行了更深入的研究

融球效果(shader)    颜色滤镜    水波扩散效果(shader)

镜面光泽效果    圆形头像（shader）    追光效果

shader 溶解效果    富文本打字机效果    放大镜效果

子弹跟踪效果    移动残影效果    刮刮卡实现

微信小游戏首包超出4M之后       遥控杆实现

金币落袋效果    使用cocos进行2D和3D混合开发

Cocos游戏开发入门最佳实践    背景无限滚动

马赛克效果(shader)

渐变过渡的相册（shader）

游戏性能优化