CSS emoji字体实现

目前主流的操作系统都已经内置emoji字体，例如苹果操作系统，iOS，安卓以及Windows 10等。

然而虽然内置了moji字体，但是我们的emoji字符并不总是会自动显示为彩色的emoji的图形，例如一个笑脸：☺

在我现在的编辑器里面就是个字符笑脸，预览也是个字符笑脸。

如果我们希望字符笑脸呈现为彩色的图形笑脸，需要专门使用一下emoji字体，例如：

article {
    /* windows系统下emoji字体 */
    font-family: Segoe UI Emoji;
}

此时就会变成这样：

考虑到还要兼顾其他操作系统，完成的Emoji字体设置代码为：

article {
    font-family: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

其中：

• Apple Color Emoji用在Apple的产品中，例如iPhone（iOS系统）或者Mac Pro（macOS系统）等。
• Segoe UI Emoji用在Windows系统中，
• Segoe UI Symbol是在Windows 7中添加的一种新字体，它包括新的脚本/符号，如盲文、德塞莱特文、奥格姆文或符文字形。不过，它不是“符号字符集编码字体”（如MS symbol），而是一种Unicode编码字体，其符号被分配给各个Unicode码位。Segoe UI symbol还有一些其他杂项符号，如棋子，扑克牌和骰子符号（这些符号构成了Segoe国际象棋和Segoe新闻符号字体的基础）、制表符、块元素、技术符号、数学运算符、箭头、控制图片和OCR优化的符号。在Windows 8中，Segoe UI符号扩展到支持Glagolitic、Gothic，旧的斜体和Orkhon脚本。在Windows 8.1中，它获得了对Meroitic草书和科普特脚本的支持。从Windows 8更新的Segoe UI符号也已被移植到Windows 7。
• Noto Color Emoji是谷歌的Emoji字体，用在Android和Linux系统中。经过我的测试发现，Noto Color Emoji这个字体直接用在font-family属性中是没有用的，使用@font-face`local("Noto Color Emoji")`一下是有效的，有些奇怪。

我们可以专门定义一个新的Emoji字体来简化我们的代码，例如：

@font-face {
  font-family: "color-emoji";
  src: local("Apple Color Emoji"),
       local("Segoe UI Emoji"), 
       local("Segoe UI Symbol"),
       local("Noto Color Emoji");
}
article {
    font-family: "color-emoji";
}