svg字体免费 关于CSS emoji字体和OpenType-SVG，这些事你知道吗？
这篇文字是在查阅了若干资料之后的一些感想，内容或许显得有些零散，也许组织得不够有序，逻辑性可能不强，完全是随心所欲地想到什么就说什么，若其中存在表述不当之处，敬请大家不吝指正。
一、CSS emoji字体碎碎念
当前，众多主流操作系统均集成了emoji字体功能，其中包括苹果的iOS系统、安卓操作系统以及微软的Windows 10等。
尽管我们的设备中已经安装了emoji字体，但并非所有emoji字符都能自动以彩色图形的形式展现，比如一个简单的笑脸表情。
在我现在的编辑器里面就是个字符笑脸，预览也是个字符笑脸。
若想使字符笑脸显示为彩色的图形笑脸，我们必须选用特定的emoji字体，比如某些字体能够实现这一效果。
article {
/* windows系统下emoji字体 */
font-family: Segoe UI Emoji;
}
此时就会变成这样：
为了同时适应多种操作系统，所编写的Emoji字体配置代码是：
article {
指定字体序列包括：Apple Color Emoji，Segoe UI Emoji，Segoe UI Symbol，以及Noto Color Emoji；
}
其中：
为了简化代码，我们可以设计一种全新的表情符号字体。例如：
@font-face {
font-family: "color-emoji";
资源来源：本地存储的“苹果色彩表情符号”
local("Segoe UI Emoji"),
local("Segoe UI Symbol"),
local("Noto Color Emoji");
}
article {
font-family: "color-emoji";
}
笑脸不是emoji图形的原因？
笑脸符号（263a）属于常见的字符之列，因此众多字体的Unicode编码中都纳入了这一字符，从而使得这些字体无法呈现彩色图形效果。
若选用的是一种较为罕见的面部微笑表情符号，比如?（1f600），那么无需进行额外的字体配置，该表情符号便会自然地呈现出emoji的形态。具体截图展示如下：
我持续对GitHub等平台采用的此类CSS样式是否真正有效表示怀疑。
body {
请勿使用以下字体：苹果系统字体、BlinkMacSystemFont、微软雅黑、Helvetica、Arial、无衬线字体。苹果色彩表情符号，微软界面表情符号;
}
大家能观察到，Apple Color Emoji以及Segoe UI Emoji这两种字体被置于了末尾位置。
有什么意义呢？
我能想到有重要的就两个场景。
用户即便在Windows操作系统中也安装了苹果的emoji字体，因此Windows系统会优先展示苹果的emoji表情。而对于一些较老的操作系统，比如win7和windows8，它们本身并不具备彩色的emoji字体，若用户自行安装，则需在相应系统上才能看到这些表情。
但是下面这两种场景出现的概率也实在太小了呀，百思不得其解！
思绪难以解开，我于是决定再次进行测试，最终弄明白了其中的原委，原来将emoji字体置于末尾竟然也有其独到之处。
原来笑脸是特殊的
笑脸的Unicode编码位置较前，因此许多常见的字体，比如Arial，都能够支持显示该字符。
含有特定字符的Unicode编码值较高，通常归类于表情符号字符范畴，不论是否进行设置，这些字符都会显示为表情图形，比如那个表示笑脸的符号1f600。
还有些字符，处在不上不下的位置，例如铅笔和警示。既然显示结果并非方框符号，这表明在系统内存在能够包容这些字符的字体，然而这些字体可能并未包含在Web设置的字体列表之中svg字体免费，比如Segoe UI、Helvetica、Arial等字体均未实现覆盖。因此，在CSS代码段落之后添加的“Apple Color Emoji,Segoe UI Emoji”便发挥了作用，确保铅笔和警示图标以Emoji图形的形式呈现。
body {
设定字体样式为：苹果系统字体，BlinkMacSystemFont，微软雅黑，Helvetica，Arial，无衬线字体，苹果色彩表情符号，微软雅黑表情符号；
}
如下图所示：
所以emoji字体放在最后还是有部分用处的。
当然，若你希望所有特殊字符都能以Emoji表情的形式展现，那么将emoji字体置于首位是必要的。举例来说：
body {
指定字体顺序为：颜色表情字体、系统界面字体、微软雅黑、Helvetica、Arial、无衬线字体；
}
然而，在非专有名词的文字区域，不应采取这种做法，因为emoji字体中同样含有数字和英文字母等元素，这可能会干扰内容的正常显示。此外，有时我们更倾向于保留某些字符的原始形态，比如四个斜向箭头符号，即↖、↗、↙、↘，而非其表情符号形式。在这种情况下，可以利用unicode-range属性来限制Emoji字符的使用范围，比如：
@font-face {
font-family: "color-emoji";
src: local("Apple Color Emoji"),
local("Segoe UI Emoji"),
local("Segoe UI Symbol"),
local("Noto Color Emoji");
/* 范围示意，自己根据需求调整 */
Unicode编码范围限定在U+1F000至U+1F644之间，以及U+203C至U+2999之间。
}
尽管如此，仍需多言几句，于是我们决定将emoji表情置于末尾，以此来提升其显示效果。
如果希望不显示彩色emoji
在夜间模式中，若颜色进行反转，表情符号可能会变得不美观。这时，您可以在表情符号字符后添加一个特殊符号 ︎，从而使字符以纯文本形式呈现，而非表情符号。
二、自定义的emoji字体
除了系统自带的有限emoji字体，我们亦能添加自定义的emoji字体。
Adobe推出了一款名为EmojiOne的Emoji字体，这款字体属于OpenType-SVG彩色字体类别；同时，Twitter也发布了开源的Twemoji Emoji字体。
使用示意：
@font-face {
font-family: 'emoji';
源文件：采用'emojione-svg.woff2'这一字体文件，格式为'woff2'。
}
当您输入表情符号时，屏幕上便会呈现丰富多彩的图案，比如在Firefox浏览器中，就能看到这样的效果。
目前，OpenType-SVG字体在Chrome和Safari浏览器中无法得到支持，而Firefox浏览器和Edge浏览器则能够兼容。
在CSS-tricks平台上的这篇文章中，我找到了一张关于彩色字体四种不同标准兼容性的详细表格。
ChromeSafariEdgeFirefox
SVG-in-Opentype
COLR/CPAL
SBIX
CBDT/CBLC
之所以设立了四个规范，是因为在emoji被纳入Unicode编码体系时，相关人员意识到有必要在OpenType字体中引入多色功能。随后，多家公司提出了各自的解决方案svg字体免费，从而形成了四种各异的规范。
