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

作者：大漠 日期：2021-08-03 点击：738
CSS
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: 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%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/emojis-in-web.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部