前端生僻字显示-低调大师

前端生僻字显示

2020-08-07 445

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

显示乱码的原因

一开始还以为是字符太多了，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）

游戏性能优化

本文分享自微信公众号 - 异名（async-code）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/u/4450106/blog/4476912

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

详细讲解！RabbitMQ防止数据丢失

思维导图一、分析数据丢失的原因分析RabbitMQ消息丢失的情况，不妨先看看一条消息从生产者发送到消费者消费的过程：可以看出，一条消息整个过程要经历两次的网络传输：从生产者发送到RabbitMQ服务器，从RabbitMQ服务器发送到消费者。在消费者未消费前存储在队列(Queue)中。所以可以知道，有三个场景下是会发生消息丢失的：存储在队列中，如果队列没有对消息持久化，RabbitMQ服务器宕机重启会丢失数据。生产者发送消息到RabbitMQ服务器过程中，RabbitMQ服务器如果宕机停止服务，消息会丢失。消费者从RabbitMQ服务器获取队列中存储的数据消费，但是消费者程序出错或者宕机而没有正确消费，导致数据丢失。针对以上三种场景，RabbitMQ提供了三种解决的方式，分别是消息持久化，confirm机制，ACK事务机制。二、消息持久化 RabbitMQ是支持消息持久化的，消息持久化需要设置：Exchange为持久化和Queue持久化，这样当消息发送到RabbitMQ服务器时，消息就会持久化。首先看Exchange交换机的类图：看这个类图其实是要说明上一篇文章介...

2020-08-03

451

昨天关于云计算的文章里面，我提到一个名词，叫做“裸金属服务器”。不知道为什么，很多读者对这个东东产生了浓厚的兴趣，纷纷在后台私信问我相关的情况。本着消灭所有知识死角的精神，今天我们就来了解一下，到底什么是裸金属服务器。乍一看裸金属服务器这个名字，确实是让人感到困惑——服务器难道不都是金属的么？难道有木质或者塑料的？这个“裸”字，莫非是指服务器连外壳都没有？其实，裸金属服务器（Bare Metal Server）之所以有这么个奇怪的名字，主要是为了和虚拟化服务器划清界限。我在昨天的文章说过，云计算的一大特点，就是从买到租，用户向云服务提供商租用计算资源。而这些租用的计算资源，大部分都不是物理资源，而是虚拟资源。没错，这个“大部分”，就是意味着有特例。而裸金属服务器，就是其中一个典型特例。裸金属服务器，也属于云计算产品为什么在全面云化的大背景下，还要“开倒车”，提供物理服务器呢？原因当然是因为虚拟化也有搞不定的地方。虚拟化并不是完美无缺的。它有两个无法回避的缺陷。首先第一点，是性能损失。虽然虚拟化云化吹得天花乱坠，但是，毕竟引入了“第三者”，操作系统和应用程序在调...

2020-08-06

467

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。