蚂蚁开源生僻字解决方案，提供生僻字录入、显示、存储、核验等功能！

Z-RareCharacterSolution 是蚂蚁集团开源生僻字解决方案，围绕生僻字领域长期存在的各种痛点，提供了最小粒度的基础能力，如：生僻字“输入法”，生僻字字体、生僻字姓名识别、转码等，同时针对典型场景，也会推荐不同的基础能力组合形成更适合自身业务的解决方案。

功能

为了解决生僻字姓名在社会各类系统中存在的问题，Z-RareCharacterSolution 提供了以下的能力：

输入键盘

输入拼⾳、拆字、笔画推荐与选择对应生僻字，支持多平台、多种输入场景（手机 APP、H5 页面、小程序…）

生僻字字体

与阿里巴巴普惠体合作字体，达到了 GB18030-2022 第三级别，解决生僻字显示问题

姓名推荐

综合多种生僻字行业录入方式，推荐可能比对通过的姓名录入方式，帮助用户顺利通行

姓名判同

根据蚂蚁多编码映射字库（Z 字库），提供不同录入方式的姓名判同

支持私有化部署

针对封闭网络场景，提供一键镜像部署到本地、离线字库等方式使用我们的产品

拥抱新国标

提供可靠的 GB18030-2022 标准兼容解决方案，既能解决生僻字用户当下的通行困难，又能帮助企业完成新国标的适配改造

生僻字显示问题

为啥生僻字普遍存在无法显示的问题？

首先我们得了解汉字是如何被显示在我们的屏幕上的。当我们打开一个文本文件的时候，计算机将经历读取文本数据 -> 编码转换 -> 寻找与文字编码匹配的字形 -> 渲染字形这个几个步骤，如下图所示：字体在文字呈现的过程中扮演着十分重要的角色，字体存储了文字编码到字形的映射关系，计算就是通过这份映射表，以及字体中存储的文字的轮廓数据（也叫字形数据）来在屏幕上绘制文字。如果在显示字符的过程中在字体文件中找不到字符的字形数据，字符就会被显示成 �▤□。

在我们平常能接触到的一些操作系统中，使用的字体文件所包含的汉字也是很有限的，比如 windows 系统微软雅黑只包含 27496 个中文字符，距离全量 8 万多个中文字符相差甚远，一些方正 PUA 的字符也是不支持显示的。

我们是如何解决生僻字显示问题的？

支付宝是如何解决生僻字显示问题的？我们和阿里巴巴普惠体合作，请他们帮忙设计了汉字字体，以及方正 PUA 字的字体。并通过向生僻字用户推送消息下载或者主动触发下载的方式，在 APP 端内页面加载了这份字体从而解决了生僻字显示问题。

生僻字显示 SDK

阿里巴巴普惠体免费商用，加载字体我们也有专门的客户端 SDK、以及H5 SDK，可以供大家小白式接入使用。

网页端使用场景

我们提供了一个可以通过 npm 或者 cdn 两种方式加载的 SDK，在需要展示生僻字的页面调用我们的 FontLoader SDK，就可以解决生僻字显示问题了。

用法

npm 包方式引用

安装工具包：

npm install ant-rare-words-utils --save

在页面初始化的逻辑里执行字体加载逻辑：

import { FontLoader } from 'ant-rare-words-utils';

new FontLoader({
  fontName: 'rare-words-font',
  onSuccess: () => {
    console.log('字体加载成功', fontFace);
  },
  onError: (err) => {
    console.log('字体加载失败', err);
  },
});

加载成功以后会自动在 body 上设置上 font-family: ‘rare-words-font’的样式属性，字体继承 body 元素的其他元素正常就可以支持展示生僻字了。如果存在需要展示生僻字的元素，自定义了 css font-family 属性，则需要覆写 css font-family 属性，可以通过在样式文件里直接指定字体属性，也可以通过执行 js 的方式来附加字体到原有 font-family 属性上。

css 直接覆写

.xxx {
  font-familay: 原有字体, 'rare-words-font';
}

js 覆写

const element = document.querySelector('.xxx');
const curBodyFontAttr = getComputedStyle(element).fontFamily;
const newBodyFontAttr = `${curBodyFontAttr}, '${fontFace.family}'`;
element.style.fontFamily = newBodyFontAttr;

CDN 方式引用

在一些没有使用 webpack 此类打包工具的业务中，无法做到使用 npm 包，可以在 html 内通过引入 cdn script 链接的方式加载生僻字工具库。

<script type="text/javascript" src="https://unpkg.com/ant-rare-words-utils/dist/index.web.js" />

<script type="text/javascript">
  new window.RareWordsUtils.FontLoader({
    fontName: 'rare-words-font',
    onSuccess: (fontFace) => {
      console.log('字体加载成功', fontFace);
    },
    onError: (err) => {
      console.log('字体加载失败', err);
    },
  });
</script>

如果 unpkg.com 被墙了，可以替换成 npm.elemecdn.com 的国内镜像，使用地址 https://npm.elemecdn.com/ant-rare-words-utils/dist/index.web.js
如果不希望跟随版本更新，可以限制引入 cdn 时的版本，使用地址 https://npm.elemecdn.com/ant-rare-words-utils@0.0.1/dist/index.web.js

参数说明

入参：返回值：

使用示例

没有加载字体的模块：已经加载字体的模块：

生僻字输入问题

生僻字录入一直是困扰生僻字用户的一个问题，现有的输入法对生僻字输入的支持度参差不齐，比如搜狗输入可以通过 U+h 横、s 竖、p 撇、n 捺、z 折的笔画输入生僻字，手机模式里搜狗输入法新增了一项生僻字键盘，其他的输入法暂时还未看到对生僻字支持比较好的。在各大输入法厂商普遍支持生僻字输入法之前，我们需要一个能提供多样化输入模式、适配多端的生僻字输入组件，嵌入在我们的页面，以帮助用户在各种场景准确地输入生僻字。

输入组件是如何实现的？

在大多数场景下我们看到了一个不知道怎么读，也不知道是啥含义的生僻字，当我们想要在电脑里输入这个字的时候，我们多数会选择通过笔画或者拆字的方式输入。在其他一些场景下，比如我姓名里有这个生僻字，我知道如何拼写，我可能会采用拼音输入的方式。无论是笔画、拆字还是拼音，这些都是字符的输入方式，他们与字符形成了一对多的对应关系，很多字符形成一个庞大的关系映射，也就形成了输入法的字库。输入法支持生僻字输入首先要做的就是拓展字库，让字库中存有生僻字字符和输入方式的映射关系。有了字库还不够，输入的生僻字得能够被显示出来，因子还需要给这些生僻字设计能够显示他们的字体，然后输入法需要加载或者内置这些字体。总结上面的话，生僻字输入组件的实现其实依赖几个关键的技术：字库、候选字推荐算法、生僻字字体。