从透明文本裁剪中排除表情符号

CSS-Tricks 有一种非常酷的悬停链接样式方法。默认情况下，文本为常见的蓝色。但当鼠标悬停在链接上时，它们会填充线性渐变。

很不错，对吧？而且技巧并不复杂。在悬停时…

• 为链接提供 线性渐变 背景，
• 将背景裁剪到文本，以及
• 使文本填充透明，以便显示背景。

它在 CSS 中看起来像这样

a {
  color: #007db5;
}

a:hover {
  background: linear-gradient(90deg,#ff8a00,#e52e71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

请注意 -webkit- 前缀，目前是必需的。CSS-Tricks 上的实际实现还有更多内容，但这一小段可以满足我们的需求。

但这不是重点。就在前几天，Brad Westfall 打电话告诉我们，此技术也会对表情符号起作用，就像任何其他文本一样，在悬停时会填充透明颜色。

他在我们的一篇文章中的一个链接上注意到这种情况。

这不是最糟糕的事情。而且完全说得通。我的意思是，表情符号是字形，就像字体文件中的任何其他文本一样，对吧？它们碰巧是彩色字体并采用图像形式。当然，在像这样我们挖空填充颜色的情况下，它们会被像任何其他字形一样对待。

但是，如果需要保持表情符号的颜色不变，可以通过将表情符号包装在 span 中并将其填充恢复到初始状态来解决。

但是谁想每次表情符号出现在链接中时都编写一个 span 呢？👎

如果您正在寻找 CSS 解决方案，我们有点走运了。也就是说，CSS 字体模块级别 4 规范包含对提议的 font-variation-emoji 属性的定义。但是，目前关于它的信息不多（我所能找到的），而且似乎并非为这种事情而设计，快速浏览一下 一些讨论 与该提案相关的讨论表明，它更多地与某些浏览器或系统如何自动将 Unicode 转换为表情符号以及如何控制这种行为有关。

在同一草案规范中，还提出了 font-palette 的定义，这似乎是一种控制彩色字体的方法——归根结底，表情符号就是这样。但这也不是解决方案。

似乎唯一无需 span 即可阻止表情符号填充发生变化的方法是某种 JavaScript 解决方案。看看 WordPress、Dropbox、Facebook 和 Twitter 等服务。它们都实现了自己自定义的表情符号集。它们使用什么？图片。

这将是一种方法。如果表情符号替换为图像（在此特定示例中为 SVG），那么这肯定可以将其排除在与链接文本一起填充之外。

或者，嘿，为什么不阻止我们陷入这种情况，并将那该死的东西放在链接之外？

这可能是我们应该一直采取的路线。但表情符号可能不会出现在链接的开头或结尾，而是在中间某个位置。它只是强调了在某些情况下拥有某种控制权可能派上用场。