从表情符号开始：网页上的彩色排版

“网页上的排版是单色的：字符要么是黑色要么是红色，绝不会是黑色和红色……然后表情符号出现了，成为了 Unicode 的一部分，因此可以通过字符——或者用字体术语来说是“字形”——来表达。笑脸、漂浮的商务人士和臭名昭著的便便堆成为了字母、数字和标点符号的真正兄弟姐妹。”

— Roel Nieskens

在代码中使用表情符号非常简单。访问 emojipedia 并复制粘贴一个。

在 HTML 中

或在 CSS 中

以及 JavaScript 中

（或者，您可以使用 Unicode 代码点指定表情符号。）

但是，您可能会遇到一个问题……

翻译上的差异：表情符号的一致性问题

不同平台上的表情符号多样性可能听起来不是什么大问题。但是，这些有时极端的不一致性为严重误解留下了空间。臭名昭著的是，“咧嘴笑的表情带微笑的眼睛”表情符号在较旧的 Apple 系统上最终变成了痛苦的鬼脸。

一个无害且有趣的玩具水枪表情符号可能会显示为致命的枪支。

还有谁知道有多少浪漫被 Google 极其奇怪的毛茸茸的心脏表情符号破坏了？

Unicode 标准化每个表情符号应该用简洁的描述来表示什么，但视觉设计则由各个平台决定。

彩色字体来救援！

解决方案？使用表情符号字体。Adobe 发布了一种名为EmojiOne的字体，Twitter 开源了 Twemoji。未来可能会出现更多类似的字体。

@font-face {
  font-family: 'emoji';
  src: url('emojione-svg.woff2')
  format('woff2');
}

如果用户在 HTML 的input 或textarea 中输入内容，他们将看到您精心定制的表情符号。❤️

表情符号字体还可以避免在放大光栅表情符号时出现的像素化问题。如果您碰巧想要非常大的表情符号，那么显然 SVG-in-Opentype 字体是更好的选择。

浏览器支持

令人困惑的是，彩色字体不是一个标准，而是四个🙄。OpenType 是 Web 上使用的字体格式。当表情符号添加到 Unicode 时，大型厂商意识到需要以某种方式向 OpenType 添加多色支持。不同的公司提出了各种各样的解决方案。字体仍然是 .ttf、.woff 或 .woff2——但在内部它们略有不同。我使用名为 Chromacheck 的工具拼凑了这个支持表

	Chrome	Safari	Edge	Firefox
SVG-in-Opentype	❌	❌	✅	✅
COLR/CPAL	✅	✅	✅	✅
SBIX	✅	✅	✅	❌
CBDT/CBLC	✅	❌	✅	❌

我们已经了解了发明彩色字体的原因。但这并不完全与表情符号有关……

彩色字母

彩色字体是一项新技术，因此目前可供选择的字体并不多。如果您想尝试一个免费且开源的字体，David Jonathan Ross 的 Bungee 是一个不错的选择。

虽然一些字体提供完整的 Emoji 支持，而另一些字体提供多色字母，但 Ten Mincho——Adobe 的商业字体——则采用了不同的方法。用其营销材料的话来说，该字体在字形中“隐藏了一些惊喜”。在 Unicode 标准中的 2666 个表情符号中，Ten Mincho 以独特的日本风格提供了非常有限的范围。

表情符号已成为人类交流的主要方式。Facebook 上每天使用超过 6000 万个表情符号 每天。在 Messenger 上，这个数字甚至更加惊人，每天有 50 亿个。如果您正在构建任何类型的消息应用程序，那么正确使用表情符号非常重要。