你使用表情符号的方式不对

从一个例子开始

问题

为什么会发生这种情况？

解决方法

注意事项

结论

作为一名 Web、移动或软件开发者，你可能在应用程序中添加表情符号的方式是错误的。原因如下。

从一个例子开始

程序员在应用程序中包含表情符号时常犯的一个错误是简单地复制它们，例如从Emojipedia等网站复制，然后将其粘贴到源代码中。

这也是我以前常做的事情。

• 源代码：

<h2>
  I'm a pretty header! 🎉
</h2>

• 输出：

  我是个漂亮的头球手！🎉

问题

如你所见，这样添加表情符号似乎效果很好。我们复制粘贴的表情符号按照我们想要的方式呈现，太棒了！

现在，想象一下，您对刚刚创建的应用程序或功能感到非常自豪，以至于您想向祖父母展示它。

你可能已经猜到了，你的祖父母可能没有市面上最新的智能手机或笔记本电脑。它们可能根本无法显示表情符号，或者只是你使用的表情符号在他们的设备中尚不支持。

因此，他们看到的是：

可能不是您希望他们看到的......

为什么会发生这种情况？

来自phonearena：

Emoji 的工作方式与常规文本完全相同——Unicode 码位对应 Unicode 目录中的每个字符，包括 Emoji。当设备发送消息时，它会发送一系列 Unicode 码位。当另一台设备收到该消息时，它会解析这些码位并显示字母、数字和 Emoji 表情。实际上，它比这更复杂一些，但基本原理如下。

如您所见，表情符号由设备解释，这意味着它们的外观可能因设备而异。

因此，它可能不会以您希望用户看到的方式出现，并且可能会改变应用程序的设计……

礼物表情，在不同设备上显示。

解决方法

幸运的是，无论您是 Web、移动还是软件开发人员，都有一个快速简便的方法可以解决此问题，那就是Twemoji。

Twitter的这个开源项目将 Unicode 表情符号转换为普通的SVG图像，这些图标可以随意放大而不会损失任何质量——也称为矢量图像。

这样，您的表情符号将以相同的方式显示在所有能够显示图像的设备上 - 这意味着任何智能手机和 PC。

现在让我们深入研究一个具体的例子。我们将在我们的 Web 应用程序中使用Twemoji库。

1. HTML代码

<h1>
  I'm a pretty header! 🎉
</h1>

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<script src="app.js"></script>

2. JavaScript代码

twemoji.parse(document.body)

是的，这就是你所需要的！😲

3. 添加一些样式

前面的代码将创建一个<img>带有类的新元素emoji。

<img draggable="false" class="emoji" alt="🎉" src="https://twemoji.maxcdn.com/v/13.0.1/72x72/1f389.png">

但是，如果我们不添加任何 CSS 样式，输出将是这样的……

因此，只需将以下 6 行添加到您的 CSS 文件中：

.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.1em;
}

我们将宽度和高度设置为与周围文本相同，并将表情符号垂直居中。

现在看看最终的输出……

这就是你的表情符号在所有使用你的应用程序的设备上显示的样子。太棒了！对吧？

注意事项

使用此库时，请注意它会创建额外的请求。事实上，输出代码是一个<img>标签，其 source 属性指向 Twemoji 的 MaxCDN URL。

如果您希望您的应用程序在网络连接较差的情况下也能快速加载，这可能会有问题。

此外，Twemojis 的外观可能并不符合所有人的喜好。

结论

可访问性非常重要：你的用户应该能够看到你应用程序的任何内容。我们在本文中看到的这个小技巧实际上在Discord应用程序中使用，也在其他一些著名的应用程序中使用——甚至 Twitter 本身也是如此。

现在，您可以向祖父母展示您的全新项目，无论他们使用什么旧设备。😏

希望这篇文章对你有帮助！你现在会在你的项目中使用 Twemoji 吗？请在评论区留言告诉我！

鲁达尔🚀跟随

法国初级 DevOps 工程师，常驻里尔。🇫🇷 主要撰写有关 DevOps 和网络安全的文章。👨🏻‍💻