这些图标如何工作：🌍🌎🌏✅️？

123

我可以将这些字符视为彩色图标：

🌍🌎🌏✅️

它只对我适用于Firefox。如果看不到彩色字符，则在我的系统上看起来像这样（可能与字体有关）：

图片描述

我什至可以在萤火虫和标签标题中看到它们：

图片描述

并且有他们的完整档案。我还与他们一起制作了这个document.title动画，展示了它们甚至可以在HTML之外工作。

那是什么？

firefox unicode

— 托马斯·扎托
source

评论不作进一步讨论；此对话已转移至聊天。

— Journeyman Geek

我正在使用Opera，但我绝对看不到您在图像“看起来像这样”中所显示的样子。因此，我很想从您的问题中进行编辑，但这不是非常重要……

— Stephan Bijzitter

37

@StephanBijzitter：你和别人没有看到的图标这样的事实，为什么形象是非常重要的。不要删除它。

— user2357112 '17

3

youtube.com/watch?v=tITwM5GDIAI

— J. Hougaard，

2

关键字：OpenType字体，SVG（stateofwebtype.com/#OpenType-SVG，color.typekit.com）

— Prinzhorn

145

这些字符是表情符号，它们是Unicode标准认可的，Unicode标准定义了每个字符所代表的含义。

对于每个操作系统和每个应用程序，它们的确切外观都不同，但是都描述了同一件事。

地球（🌏）是Unicode字符1F30F，被称为 EARTH GLOBE ASIA-AUSTRALIA。第二个（✅）被称为 WHITE HEAVY CHECK MARK，并且是Unicode 2705。

以这种方式，有成千上万个表情符号，每个应用程序都支持，有些则较少。在此处查看完整列表http://www.fileformat.info/info/emoji/browsertest.htm

— 伊斯洛尔技术
source

56

它们的确切外观取决于您使用的字体，因为字体是用于定义字符外观的元素，而表情符号只是字符。

— totymedli '02

23

实际上，第二个是（正如您所说的）结合了VARIATION SELECTOR-16的WHITE HEEKY CHECK MARK。question从问题中复制的looks看起来像是绿色框中的白色对勾，,从您的答案中复制的看起来像是带有黑框的白色对勾，当我在带有黑框的✅白色对勾后粘贴变体选择器时，绿框内有相同的mark️白色对勾标记。为了清晰起见，此评论的屏幕截图

— Stijn

4

由于字体支持不佳，他们可能没有注意到。在我的浏览器上，绿色的背景没有出现。

— user2357112 '17

8

@Stijn，对我来说，在Chrome浏览器中，它们都是绿色方框内的

— Yisroel Tech

6

这没有回答问题，这是关于它如何在Firefox中呈现，而不是为什么出现了表情符号的问题。

— oldmud0

73

Firefox 对这些表情符号字符使用特殊字体。它采用了一种相对较新且很少使用的TrueType字体功能：分层颜色字形。除此之外（即具有带有预着色字形的特殊字体），这些图标是普通的Unicode字符。

Windows 仅在版本8.1及更高版本中才对这些彩色字体提供本机支持，因此Firefox会私下安装EmojiOne，并在Windows 7中为其使用自己的字体渲染器。这也解释了大多数其他应用程序中缺少彩色emoji图标的情况。

— 艾塔普
source

2

如果Win10中原生支持分层的颜色字形，为什么它们在例如Edge中仍然显示为单色？

— 巴斯

5

@Bas，正如我们通过Edge开发人员工具看到的那样，未选择Segoe UI Emoji显示此页面（其他单色字体则显示）。将字体插入font-family属性可以解决问题：i.imgur.com/IXiNC86.png

— aitap

4

最新的Edge预览中提供@Bas彩色表情符号支持，并将在下一个公共版本中提供。

— Josiah Keller

1

奇怪的是，我的Ubuntu 16.10机器上的Firefox显示黑白字形（我后来启动了Win10，并确认它们确实是彩色的）

— 路加福音

2

@Luke Ubuntu已为Unity 8计划了颜色字形支持

— 。– stommestack

25

简而言之：Firefox使用一种字体，这些符号以它们的方式显示。

这些字符是Unicode标准的一部分。

Unicode是一种计算行业标准，用于对世界上大多数书写系统中表示的文本进行一致的编码，表示和处理。与通用编码字符集（UCS）标准一起开发并发布为Unicode标准，最新版本的Unicode包含超过12.5万个字符的库，涵盖135个现代和历史脚本以及多个符号集。-维基百科

因此，与ASCII（只有很少的ASCII）不同，Unicode包含多个符号集。现在，虽然已经规范了什么代码代表什么字母或符号，但Unicode并没有完全指定该符号的外观。因此，所有操作系统都有自己的符号图形集，以看起来不同。这可能包括一些颜色，一些只是轮廓或黑白。

同样，字体对于这些符号也可能具有自己的艺术风格，以便使字符具有应用程序的感觉。即使在应用程序内部，您可能也会使用不同的图像集来拥有不同的页面。因此，您可以像其他方式与角色进行交互，但外观会有所不同。

你可以看到这是怎样的表情符号（对于🌍🌎🌏，跳到＃1483）看在各种平台上这里。

— 脉冲喷射
source

4

128,000是很多要绘制的图标。我不怪艺术家们使用黑白图标而不是全彩。

— 丹丹，

@ Dan，128,000是字符数，而不是符号。其中也包括语言字符，对于日语或普通话这样的语言字符数量巨大。

— PulseJet '17

1

@丹，我只是说没有128,000个必须着色的符号。并不是说着色不多，但这远不及128,000。

— PulseJet '17

1

啊，我并不是要暗示它们都应该是彩色的，仅仅是要画出很多东西就足以让我不想使它们复杂化（即上色）。哈哈。

— 丹丹，

2

@Dan没有人画那么多代码点，并且几乎没有字体包含所有Unicode代码点的字符。当当前字体不包含字形时，字体渲染器将替换其他字体的字形。为什么没有包含所有Unicode字形的字体？

— phuclv

2

这些字符“工作”方式相同的其他人物，如a，ø，λ，ଶୁ，に和晨工作。字符由抽象数字表示，该数字用于选择和索引可用字体以显示字符。

在您的系统，看来Firefox没有自己的渲染，并已获得包含字形的字体🌍，🌎，🌏和✅️。其他应用程序通常将使用X服务器提供的字体（或等效字体），因此仅限于您已安装或将服务器指向的字体（例如，具有xset +fp或类似的字体）。

多色字体是最近才进行的实验，仍是相当实验性的发展。传统上，字形是可以在任何背景下合成的单一颜色。

— 托比·斯皮特（Toby Speight）
source

1

每种浏览器的用法不同，您可以向网站添加特定字体，这些字体会加载到这些表情符号中。例如：

有关图形设计的帖子是否有免费的Emoji字体？可能也很有趣。如果没有这种自定义图标字体，则必须记住，您的网站在每种浏览器中都会看起来有所不同。

_{这只是一个列表，旨在引导人们更快地了解表情符号和unicode表情。}

— 膨松剂
source

0

这些只是Unicode字符，因此只要系统上提供了字体和字形，任何支持Unicode的文本框都可以毫无问题地显示它们。但是，每个Unicode字符的外观取决于它们的渲染器和字体。

传统上，字符只用一种颜色填充。彩色表情符号是一个新生事物，因此它们的支持因平台而异。已经发明了各种用于着色的技术，例如嵌入式PNG，SVG或分层的掩模。但是所有这些都需要一个新的渲染器，而该渲染器在较旧的操作系统中不可用。

结果，从50.0版开始，Firefox嵌入了自己的渲染器和字体，以支持彩色表情符号。您可以在发行说明中找到它

已变更

为没有本机Emoji字体的操作系统添加了内置的Emoji设置（Windows 8.0和更低版本以及Linux）

字体文件可以在 %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

— phuclv
source