emoji表情与 iconfont 一锅炖

最新推荐文章于 2022-08-15 18:58:44 发布

Msro

最新推荐文章于 2022-08-15 18:58:44 发布

阅读量702

点赞数

文章标签： javascript 操作系统前端 ViewUI

什么是emoji？

??????????????????????☺????????????????

上一这一排就是emoji表情。一大波Windows用户懵逼了，这是什么鬼表情（这么丑），冒牌的吧，看起来和微信里的emoji表情差老远了。不信？你换个苹果系统（MAC或iOS）的看看，是不是一模一样了。再用安卓手机看看，好像又不一样了；换个WP系统的又不一样。

这到底是怎么一回事呢？去官网http://emojipedia.org/people/看看，一批熟悉又陌生的表情。第三个表情好像很有趣，点进去看看。哟，这不就是笑cry 吗。

Codepoints
? U+1F602
Shortcodes
:joy:

原来如此，是不同的操作系统对这个表情的画风不一样。而微信是使用了苹果系统的emoji画法作为自己的表情，最近的微信更新了一下表情，大家都看到了其实微信用来传输的并不是emoji的原编码，而是 [奸笑][嘿哈][捂脸][机智][皱眉] 等等的代名。

后面这里写的U+1F602就是指这个表情的Unicode编码是 1F602 的意思，:joy: 是该表情的简称，和微博里用[笑cry]代称是一样的。我们知道，常用的Unicode编码是双字节的，而这些emoji表情的Unicode编码比双字节还多出前面的1，那么按照Unicode转UTF8的规则，一个emoji表情在UTF8的文件中占用4个字节。GBK（或GB2312）编码中并没有emoji表情的编码，所以GBK编码的文本文件无法粘贴emoji表情，只会成为两个问号。GBK编码的网页也无法显示这种格式的emoji。

那么非Unicode系编码的网页就无法显示emoji表情了吗？当然不是，还可以通过替换文本成为图片的方式，传统的网页表情不就是这样做的嘛~~除此之外，还有另外一种方式可以让浏览器对GBK编码页面也支持emoji表情，我们稍后再谈。

来聊聊 iconfont

近年来流行出一种图标，叫做iconfont，中文名叫字体图标。个人认为，iconfont的流行跟bootstrap是有极大渊源的。字体图标的原理，就是把要用到的图标打包成一个字体文件（通常是*.ttf），然后网页里用Unicode码对应的文字，显示出对应的该图标。下面是一个精简的Bootstrap库的字体图标使用示例（仅演示原理不考虑IE字体格式兼容性）

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('./fonts/glyphicons-halflings-regular.ttf') format('truetype');
}
.glyphicon {
  font-family: 'Glyphicons Halflings';
}

.glyphicon-user::before {
  content: "\e008";
}
</style>

<span class="glyphicon">&#xe008;</span>
<span class="glyphicon glyphicon-user"></span>

要显示一个图标，有两种方式：

一种是unicode引用，使用的原理是HTML转义序列，浏览器可以用 &#xXXXX; 的形式表示一个Unicode字符（十六进制），比如例子中的  就是表示Unicode为U+e008的字符，因为这个字符现在还没有被使用，所以如果没有引入这个字体的话，只会显示为一个方块码  。而在class里设定引入了这种字体，则会把这个方块码替换显示为对应的文字，也就是对应的图标。

另一种是font-class引用，每一个图标都有一个class，使用::before伪元素，content里面写上该图标的unicode码，用的是 \XXXX 的形式，使用哪个图标的时候就加上哪个图标的class。

这两种方式的根本原理是一样的，都是使用Uncode字体，两者的区别请参考中文官网。这两者都是独立于网页编码的，无论网页编码是UTF8还是GBK、BIG5 噼里啪啦，只要是个浏览器都能支持此类型的字符。字体图标不局限用于bootstrap中，其它一些衍生的前端库如 H-ui、Amaze UI 等也含有字体图标这功能。不使用这些框架的，也可以去阿里巴巴图标库去挑选打包下载自己喜欢的图标字体，或者自己画一些图标传到上面去跟大家分享~~

注意：火狐浏览器默认不允许跨域取字体（可能是出于对字体著作版权保护的原因），需要在存放字体的服务器添加一个允许跨域的header。以apache为例，先开启headers_module功能模块（可能要安装），再在字体目录放置一个.htaccess文件，内容如下

#允许火狐浏览器跨域取字体
<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
　　#允许所有域
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

最后，emoji与iconfont两者有关系吗？

初看起来，emoji 与 inconfont 似乎并没有什么关系。但是他山之石，可以攻玉。还记得刚才使用emoji表情的时候有什么问题吗？

只支持UTF8编码的网页，不支持GBK编码；
不同的操作系统，显示的emoji表情不一致，有的甚至显示不出来；
木有定制或者新加自己的emoji表情；

第一题。如果是GBK编码使用HTML转义，保存时全部emoji表情转码成 &#xXXXX; 的形式，输出时也是使用这种显示，浏览器会自动把它们显示为emoji符号。如果是UTF8编码，那就什么都不用做啦。
第二题。使用一种emoji表情符号制作成字体文件，对应到相应的emoji表情的unicode，引入该字体不就直接显示了嘛。
第三题。木有“滑稽”、木有“呵呵”、木有“doge”，自己动手丰衣足食，反正Unicode编码还有一大把编码是没人用的。
最后，怎么输入呢？手机上的输入法就有emoji输入。电脑上有的输入法也有，没有的话可以装浏览器插件（chrome用户自备梯子）。想给用户用，那就写个表情选择框啰。

为什么要使用自定义字体的emoji表情？技术总在进步，我们可以不用现在绝大多网站和APP的表情处理方式：图片转成编码传输和保存，又转图片来显示，手机上还要处理输入法的emoji编码与图片的转换。而现在只需要使用emoji符号，再加上一个字体文件，不用任何转换就可以全搞定了。

来一批老版本windows的黑白线条emoji~
??????????????????????☺????????????????

PS...因为阿里巴巴的图标字库网站不给力，生成不了彩色的ttf字体文件。我正在苦苦寻觅更先进的字体转换工具，有研究过的请留言，不胜感激。这里有一篇彩色字体的文章讲解，但涉及的内容我比较陌生，高手请看《探索在Android中使用Emoji Font的方法》。

姊妹篇：《彻底搞懂编码 GBK/GB2312 和 UTF8、Unicode 》