web端怎么和移动端的emoji表情兼容?

html-css014

1、先上张图片,给大家看看需求是什么样的:

要求在安卓端或是iOS端上添加的emoji表情要能在web端进行展示出来。

2、拿到这种需求,对于底层的程序员来说,没办法以前没接触过,我只在斗图中见它们的次数比较多,所以只能去寻找度娘的帮助,你知道的,度娘给我们展示的一般都是比较高级的。所以一般文字太多的比较看不懂,尤其是讲述一些编码的问题,我更是不懂,所以还是手把手的教程比较靠谱。

3、我开始从数据库中拿到的数据是这样的

我展示出来的效果也是这样的,带一些小框框,这怎么能忍受的了,果断去寻找解决的办法。

4、最终,I get it  ,下面我讲述一些解决的办法。

5、首先引入,emoji.css  emoji.js   emoji.png这三个文件。记住这三个资源文件是在同一层的,并且千万别忘记引用.png图片,因为表情的展示全靠它呢。

这里看到了没,最关键的代码,其中$('.remark-edit')是你用来展示表情的div,记住div里存放的是展示表情和字符串的文本,不能有其他的标签在里面,我试了会出错,不过也肯定能解决,我没尝试哈,大家可以试试看。

emoji.unifiedToHTML(html)就是调用emoji.js里的表情解析方法,我用的是avalon引入js的方法,如果想直接引入,你可以用emoji.js里的对象

如果要进行发送评论的时候要注意对emoji表情进行反解析,也就是过滤掉span标签,进行还原为原始的数据,看下图所示:

就是这个来去调用。

Emoji表情符号在OS X系统和iOS、Android、Windows Phone等各个手机中已经默认支持,所以在这些设备的Web端显示没有问题,可直接使用。

但是在Windows系统中,Web端显示Emoji或多或少都有一些问题。

首先,Windows 8 和 Windows Server 2012 默认也是支持 Emoji 的,但是只有在IE浏览器中才会显示。至于 

Windows 7 和 Windows Server 2008 R2 只要是更新了补丁包 KB2729094 

的,也可以在IE中直接显示Emoji。而这些系统的非IE浏览器却无法显示。

其实,补丁包 KB2729094 对Emoji的支持只不过是增加了“Segoe UI 符号字体”,只要在Web端CSS中引入这个字体,便可以让所有浏览器都支持Emoji。

Emoji 字体是 OpenType SVG 字体的一个例子。使用 Emoji 字体,您可以在文档中包含五颜六色、图形化的字符,例如表情符号、旗帜、路标、动物、人物、食物和地标等。使用 OpenType SVG emoji 字体(如 EmojiOne 字体),您可以通过一个或多个其他字形创建某些复合字形。例如,您可以创建国家/地区的旗帜,或者更改描述人物和身体部位(例如,双手和鼻子)的某种字形的肤色。

注意:

最近使用的 Emoji 字体将出现在字形面板的顶行。

更多操作详情,可在Adobe国际认证平台查询,学习。

在早前的时候,在微信emoji表情中是有红色囍字的,点击就可以使用了,但在后来的更新中又取消了该功能。所以就找不到了。

绘文字(日语:絵文字/えもじ emoji)是日本在无线通信中所使用的视觉情感符号,绘指图画,文字指的则是字符,可用来代表多种表情,如笑脸表示笑、蛋糕表示食物等。在中国大陆,emoji通常叫做“小黄脸”,或者直称emoji。

在NTTDoCoMo的i-mode系统电话系统中,绘文字的尺寸是12x12 像素,在传送时,一个图形有2个字节。Unicode编码为E63E到E757,而在Shift-JIS编码则是从F89F到F9FC。基本的绘文字共有176个符号,在C-HTML4.0的编程语言中,则另增添了76个情感符号。

最早由栗田穰崇(Shigetaka Kurita)创作,并在日本网络及手机用户中流行。

自苹果公司发布的iOS 5输入法中加入了emoji后,这种表情符号开始席卷全球,emoji已被大多数现代计算机系统所兼容的Unicode编码采纳,普遍应用于各种手机短信和社交网络中。

emoji就是表情符号,来自日语词汇“絵文字”(假名为“えもじ”,读音即emoji)。

emoji的创造者是日本人栗田穰崇(ShigetakaKurita),他将目光投向儿时的各种元素以获取灵感,如日本漫画和日本汉字等。“日本漫画中有许多不同的符号。漫画家会画出一些表情,表现一个人满头大汗或是迸发出一个想法时头上出现一个灯泡。”

以上内容参考:百度百科-emoji