我怎样才能在网上获得彩色表情符号

Question

‍♂️❤️

我正在尝试用 unicode 集中的字符替换基于我在 2008 年左右实现的一系列 gif 图像的基于网络的表情符号系统。我上面显示的表情符号列表是我选择的图标来替换我正在使用的等效表情符号集。不完美，但足够接近。

除了它们不是彩色的！

当我粘贴它们时，就像我将它们粘贴到 gedit 中一样，gedit 以彩色显示它们。然而，即使我使用了我认为 gedit 使用的字体（Dejavu Sans Mono）使用 @font-face 将其加载到网页中，也有显示，因为这里主要是黑色和白色，只有几个颜色。我做错了什么吗？

这是我的一部分 css

   .item {
    height: 60px;
    display: flex;
    flex-direction: row;
    font-family:'DejaVu Sans Mono', Helvetica, sans-serif;
    scroll-snap-align:start;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
    margin:0 5px 5px 3px;
  }
  @font-face {
    font-family: 'DejaVu Sans Mono';
    src: url('/fonts/DejaVuSansMono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

Answer 1

我找到了适用于我的 Chrome 桌面浏览器、我的 Android Phone 和我的 Apple Ipad.

的解决方案

我下载了这个字体 https://github.com/googlefonts/noto-emoji/blob/master/fonts/NotoColorEmoji.ttf

将它放在我的 /fonts 目录中，Web 服务器可以找到它。

然后在我的 CSS

中使用了以下内容

      @font-face {
        font-family: 'NotoColorEmoji';
        src: url('/fonts/NotoColorEmoji.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

和

      .item {
        height: 60px;
        display: flex;
        flex-direction: row;
        font-family:'NotoColorEmoji', 'Roboto', Helvetica, sans-serif;
        scroll-snap-align:start;
        border-radius: 5px;
        box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
        margin:0 5px 5px 3px;
      }

现在我选择的所有表情符号都是彩色的。

我怎样才能在网上获得彩色表情符号

How can I get colour emois on the web

css

emoji