如何通过CSS从CDN使用Google Noto彩色表情字体

Question

有没有办法从CDN使用谷歌的彩色表情字体？我试图在jsfiddle中使用它，但不知道如何操作。

- Mladen Mihajlovic

Answer 1

您可以像这样使用它：

@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

更新

您也可以尝试使用“Noto Colr Emoji Glyf”，这是COLRv1字体：https://fonts.googleapis.com/css2?family=Noto+Colr+Emoji+Glyf

请查看repo和demo。

但请确保检查浏览器支持情况，截至撰写本文时，仅在Chrome 98+中支持。

- Maxim Mazurok

---

哇，当你写这个的时候我真的没有注意到。非常好用，谢谢！这是一个小玩意儿，可以用它来试试：https://jsfiddle.net/dbtazwhv/ - Mladen Mihajlovic

请注意，您无需替换现有字体即可使用“Noto Color Emoji”等字体中的彩色表情符号。相反，您可以将“Noto Color Emoji”添加到您的font-family样式值的末尾，这样它就会提供彩色表情符号（覆盖浏览器非彩色回退），但会让您的常规字体（列在开头）为常规字符提供支持。 - Venryx

谢谢大家❤，@Venryx提出了使用表情符号字体的好方法。 - Maxim Mazurok

链接已失效，您可以使用此网址代替：https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf。 - Arnooo

请注意，您还可以使用<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap">。尽管它不是COLRv1，但它可以显示更多的表情符号，例如（身份证）。Noto Colr Emoji Glyf似乎仍在积极开发中，仍然缺少一些表情符号，因此我不会在生产中使用它。截至今天，Noto Colr Emoji Glyf字体几乎与Noto Color Emoji字体完全相同，因此可能仍然主要是位图。 - thdoan

Answer 2

这不是谷歌，但你可以尝试这个替代品， EmojiOne 这是CDN。

https://cdnjs.com/libraries/emojione

- AshhaR

---

是的，谢谢。我还是和他们一起去了，但我只是想知道这是否可行... - Mladen Mihajlovic