关于css: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";}