CSS颜色定语

如何让每个表情符号都呈现出颜色

在emoji之前，有dingbats。在CSS彩色表情符号中，你可能会看到一些字形以黑白呈现。这些是旧的dingbats，有时字体堆栈会在使用彩色emoji字体之前渲染它们。这对macOS和linux来说尤其如此。对于iOS和Windows来说，渲染似乎默认为彩色，一切都能正常工作。这可能取决于你的字体堆栈、浏览器和操作系统，而且只有少数字符会受到影响。在大多数情况下，这很好，你永远不会注意到。

但是，如果单色丁字裤是一个问题，请制作一个彩色表情符号字体堆栈的子集，并把它放在首位，这样就不会使用默认的丁字裤了。要做到这一点，需要添加一个unicode-range 属性，将彩色表情符号限制在丁字格重的部分。如果不添加这个限制，浏览器就会使用奇怪的间距和字母。下面是CSS和演示这个的代码表。

// color dingbats for macOS and linux
@font-face {
  font-family: "color-dingbat";
  src: local("Apple Color Emoji"),
       local("Segoe UI Emoji"), 
       local("Segoe UI Symbol"),
       local("Noto Color Emoji");
  unicode-range: U+2000-2c00;
}

// and add to front
body {
  font-family: color-dingbat, your-font, sans-serif, color-emoji;
  // or just before the default font.  Depends on the font.
  font-family: your-font, color-dingbat, sans-serif, color-emoji;
}