目前支流的操作系统都曾经内置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";}