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

 我来答
xiangsi1016
高粉答主

2018-04-09 · 说的都是干货,快来关注
知道大有可为答主
回答量:157
采纳率:100%
帮助的人:2.5万
展开全部

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。

就烦条0o
2016-07-04 · 知道合伙人软件行家
就烦条0o
知道合伙人软件行家
采纳数:33315 获赞数:46492
从事多年系统运维,喜欢编写各种小程序和脚本。

向TA提问 私信TA
展开全部
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。
先去有该字体文件的系统中找到字体文件“Segoe UI Emoji”(文件名seguiemj.ttf);然后将ttf字体文件转成eot格式(针对老的IE浏览器);最后是CSS:

@font-face {
font-family: 'Emoji';
src: url('../fonts/seguiemj.eot');
src: url('../fonts/seguiemj.eot?#iefix') format('embedded-opentype'),
url('../fonts/seguiemj.ttf') format('truetype');
}
body {
font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';
}
input, button, textatea, select {
font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';
}
html:root {
body {
font-family: Tahoma, Geneva, 'Microsoft Yahei', 'Simsun', 'Segoe UI Emoji', 'Emoji';
}
input, button, textarea, select {
font-family: Tahoma, Geneva, 'Microsoft Yahei', 'Simsun', 'Segoe UI Emoji', 'Emoji';
}
}
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式