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";

}