如何为表情符号使用不同的样式？

Question

很多网站都有自己的表情符号样式，如何添加自己的表情符号图标？是否有我必须添加到我的文档或与 font-family 相关的库？

例如，我想将 Twitter 的表情符号样式添加到我的网站。有什么想法吗？

Answer 1

请检查并按照PostCSS Emoji Style中的步骤操作。

例如：

npm install postcss-emoji-style

Answer 2

不能直接修改表情符号的渲染。不管 font-face，用户的浏览器和 OS 决定表情符号字符的呈现方式。

但是您可以做的是 Twitter 和其他一些平台所做的，即处理输入文本以用您想要的任何其他图像替换 表情符号字符。

Check out this article with more info, including a link to Twemoji，Twitter 的一个方便的开源库来处理这个问题。

Answer 3

表情符号可以用单独的图像（PNG、SVG...）显示，但通常使用彩色字体显示。

• Android 使用 Noto Color Emoji
• iOS 和 macOS 使用 Apple Color Emoji
• Windows 和 XBox 使用 Segoe UI Emoji
• Twitter 使用 Twemoji

其他平台、应用程序或服务可能会使用其他字体、单个图像或它们的某种组合。

字体将使用 OpenType 字体中可用的少数颜色格式之一。有一个有用的彩色字体摘要 here，尽管它只偏向于一种颜色格式（SVG——编写该页面是为了宣传用于生成该格式的产品），但它已经过时了，因为它没有提及 OpenType 格式的最新发展（对 COLR 格式的重大改进）。