现代 CSS

表情符号(Emoji)在Web中的使用

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

大约从 1998 年(还是 1999)年开始有了 Emojis(表情符号) 之后,Emojis 就风靡一时,在一些聊天工具和Web应用上也受到广泛的使用。也就是说,它不再局限于用在聊天工具用来交流,还在 Web 页面或应用上使用也越来越多,在一些组件上的使用也更频繁。

就在最近,微软发布了全新的 3D 风格的表情符号(Emoji),这套 3D 风格的表情符号已经在 Flipgrid 上线,并将于今年晚些时候登录 Teams 和 Windows 系统,Yammer、Outlook 和其他平台将在明年推出:

对于日常用户来说,表情符号是很好的。它们很有趣,也很容易使用。对于Web开发者而言,想在 HTML、CSS 和 JavaScript 中使用表情符号,情况还是有点不同。在这篇文章中,我们就和大家一起探讨表情符号在 Web 上的使用。

Emoji的历史

在开始聊 Emoji 在 Web 中的使用之前,先简单地了解 Emoji的历史。下面这部分内容摘自 维基百科对 Eemoji 的介绍:

第一个 Emoji 是由 栗田穰崇 于1998年或1999年创造,他当于隶属于 NTT DoCoMo 公司 i-mode 移动互联平台的团队。第一套 Emoji 包括 172 个 12 x 12 像素的图标,设计的初衷是作为 i-mode 消息功能的一部分帮助促进电子通讯,并作为区别于其他业务的特色功能。然后在 1997 年, Nicolas Loufrani 注意到, ASCII 表情符号在移动技术中的使用正在增加,他开始尝试动画效果的笑脸表情,目的是使用纯标点符号设计一套与现有 ASCII 表情对应的彩色图标,以促进其在数位领域的使用。 Loufrani 由此创造了第一套图形化表情、并编译了在线表情符号词典,将这些符号分成不同类别,包括:经典类、情绪类、旗标类、庆贺类、娱乐类、体育类、天气类、动物类、饮食类、民族类、职业类、行星类、星座类、婴儿类等,这些设计最初于 1997 年在美国版权局注册,随后全套图标于 1998 年以 .gif 格式文件在网络上发布,成为科技行业中使用的第一套图形化表情符号:

2000年,Loufrani 创建的表情目录开始提供下载,用户开始可以从互联网上为手机下载 Loufrani 创建的表情目录,该目录编译了超过 1000 个笑脸表情符号入其 ASCII 版本。该目录在 2002 年由 Marabout 以《Dico Smileys》书籍形式出版本。2021年,表情符号公司 Smiley Company 开始向各家电信公司的手机提供 Loufrani 图形表情符号的授权下载,这些公司包括诺基亚、摩托罗拉、三星等。

如果你对 Emojis 历史感兴趣的话,还可以阅读:

究竟什么是表情符号

我们所知道的表情符号是一个个彩色图标。但其更准确的定义是:

表情符号是使用在网页或聊天中的形意符号

大多数情况之下,表情符号给我们的印象就是 它们是传统意义上的图像(或图标),但它们并不是。它们更像是 字母数字标点符号奇怪的符号 ,我们更倾向于把它们当作 文本 来处理。

现在,我们只需要知道表情符号是:

  • 只是字符(字符串)
  • 可以被选择,复制、粘贴,并且调整大小等
  • 有一个更原始的数字表示,可以用相应的数字来描述表情符号

初步对表情符号有这些认识就OK了。现在我们开始看看表情符号在 Web 中的使用和所起的作用。

HTML 中的表情符号

要在 HTML 文档中使用表情符号,我们首要做的第一件事情就是把 HTML 文档的字符Unicode编码设置为 UTF-8。这样做可以确保表情符号在你的用户可能使用的浏览器和设备上(客户终端)显示一致。做到这一点很简单,只需要在 <head> 中使用 <meta> 来指定字符Unicode编码:

<meta charset="UTF-8">

有了这个基础保障之后,我们可以通过下面两种方式把表情符号添加到 HTML 文档中:

  • 在 HTML 中直接使用表情符号
  • 在 HTML 中使用表情符号对应的原始Unicode码编码

先来看 在 HTML 中直接使用表情符号。

在 HTML 中直接使用表情符号

在 HTML 中直接使用表情符号其实很简单,可以从某个地方复制粘贴到 HTML 文档中。不过,我们需要一个应用或网站,允许你复制表情符号的原始字符形式。现在在互联网上这样的网站或应用很多,你在 Google 搜索框中输入 Emojis 的关键词可以搜索一大堆,比如:

我个人比较喜欢 Emojipedia ,可以在这个网站上直接搜索或浏览你想要找的任何表情符号。一旦找到了你要的表情符号,你就可以看到并复制该表情符号:

一旦你复制了它,只需要在你的标记中(HTML标签元素中)把它粘贴到它的预定目的地,即 把复制过来的表情符号当作 HTML 标签元素的内容(文本节点)

因为表情符号被视为 基于文本的内容,因此你可以在任何支持文本的地方粘贴它们。正如上图所示,你在浏览器中预览你的 HTML 文档时,一切都会正常。如果你使用浏览器开发者工具审核带有表情符号的 HTML也能正常显式:

嗯!就是这么简单!从另一个地方,复制粘贴过来就可以OK!

在 HTML 中使用表情符号对应的Unicode编码

如果有的环境之下直接复制粘贴过来的表情符号放置在 HTML 的标签元素中,浏览器客户端无法正常显示(即直接指定的表情符号不起作用)。我们可以换过一种方式来将表情符号放置到 HTML 的标签元素中。即 使用代表表情符号的Unicode编码,因为每一个表情符号都有自己对应的一个Unicode编码。如果你在使用 Emojipedia 获取表情符号,那么可以看到表情符号对应的Unicode编码(Emojipedia的 “Codepoints”):

或者点击上图红色框的链接部分,可以看到该表情符号更详细的信息:

对于“Girl”表情符号,其对应的Unicode编码是 U+1F467 。如果我们要在 HTML 中使用 U+1F467 对应的表情符号,需要对该Unicode编码做一些转换,使用 &#x 来替代 U+1F467 编码中的 U+ ,即 U+1F467 更换成 &#x1F467 。我们只需要把这个代码(&#x1F467)放到 HTML 标签元素中即可:

<h1>&#x1F467 Girl</h1>

当你使用浏览器浏览的时候,可以看到“Girl”表情符号正常显示出来。最终的效果是一样的,但相比之下,使用表情符号编码看起来很怪,甚至不知道代表是什么:

效果如下:

有的时候你可能在一些网站或应用上获取的表情符号,但没有对应的Unicode编码,那你就无法像上面这样在HTML中使用表情符号。不过我们可以借助 JavaScript 脚本来把表情符号的Unicode编码转译出来:

function emojiUnicode (emoji) {
    var comp;
    if (emoji.length === 1) {
        comp = emoji.charCodeAt(0);
    }
    comp = 
剩余80%内容付费后可查看
返回顶部