本文是参考一些材料之后的碎碎念，可能比拟杂，可能比拟乱，可能没有什么逻辑，想到哪里说到哪里，如果有说的不精确的中央，欢送斧正。

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

}

笑脸不是emoji图形的起因？

笑脸☺字符（263a）算得上一个很常见的字符，于是很多字体Unicode范畴就蕴含了这个字符，导致不是黑白图形。

如果咱们应用的是一个不常见的脸部笑脸表情，例如????（1f600），咱们无需额定的字体设置，它就呈现出了emoji图形的样子。截图示意如下：

因而，我始终狐疑github等网站设置上面这种CSS没什么用？

body {

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,**Apple Color Emoji,Segoe UI Emoji**;

}

大家能够看到Apple Color Emoji和Segoe UI Emoji这两个字体放在了最初。

有什么意义呢？

我能想到有重要的就两个场景。

  1. 用户在windows零碎上也装置了苹果的emoji字体，于是Windows零碎优先显示苹果的emoji表情。
  2. 一些老旧操作系统，例如win7，windows8并没有黑白的emoji字体，用户本人装置了，须要在这些零碎上显示。

然而上面这两种场景呈现的概率也切实太小了呀，百思不得其解！

思是无解，于是我就入手再测试，终于搞清楚到底怎么回事了，emoji字体放在最初还是有点用途的。

原来笑脸是非凡的

笑脸的Unicode比拟靠前，于是一些惯例的字体就能够笼罩到，例如Arial。

有字符的Unicode比拟靠后，属于典型的Emoji字符，这些字符设不设置都会体现为Emoji图形，例如1f600这个笑脸????。

还有些字符，处在不上不下的地位，例如铅笔✏和警示⚠。既然最终出现的不是方框字符，阐明抄零碎中还是有字体能够笼罩到他们的，然而这些字体可能并不在Web设置的字体范畴内，例如Segoe UI、Helvetica、Arial这些字体都没有笼罩到，于是上面这段CSS代码前面的“Apple Color Emoji,Segoe UI Emoji”就有作用了，能够让铅笔✏和警示⚠在视觉上是Emoji图形：

body {

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;

}

如下图所示：

所以emoji字体放在最初还是有局部用途的。

当然，如果你想所有的特殊字符以Emoji图形的形式出现，那就应该把emoji字体放在最后面。例如：

body {

font-family: "color-emoji", system-ui, Segoe UI,Helvetica,Arial,sans-serif;

}

然而，其余一般文字出现的中央不要这么做，因为emoji字体也蕴含数字英文字母之类的，会影响失常内容的显示。同时，有时候咱们心愿有些字符还是原始形态，例如四个歪斜箭头字符↖ ↗ ↙ ↘，而不是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-range: U+1F000-1F644, U+203C-3299;
}

不过还是啰嗦，因而，咱们还是把emoji表情放在最初，肯定水平加强emoji表情的显示。

二、自定义的emoji字体

除了几个零碎内置的emoji字体，咱们还能够引入自已的emoji字体。

例如Adobe出了个名叫EmojiOne的Emoji字体，是一种OpenType-SVG字体黑白字体；Twitter也开源了一个Twemoji的Emoji字体。

应用示意：

@font-face {
font-family: 'emoji';
src: url('emojione-svg.woff2') format('woff2');
}

此时输出Emoji符号，就会呈现黑白的图形成果，例如在Firefox浏览器下：

目前OpenType-SVG字体Chrome和Safari浏览器是不反对的，Firefox浏览器和Edge反对。

上面这个CSS-tricks上这篇文章中找到的黑白字体四种不同规范的兼容性表：

Chrome

Safari

Edge

Firefox

SVG-in-Opentype

❌

❌

✅

✅

COLR/CPAL

✅

✅

✅

✅

SBIX

✅

✅

✅

❌

CBDT/CBLC

✅

❌

✅

❌

之所以会有4个规范，是因为当emoji被增加到unicode时，下面的那群人意识到须要以某种形式向OpenType增加多色反对。而后不同的公司提出了不同的解决方案，于是就有了4种不同的规范。

提一下黑白字体

有一些专门的黑白字体，例如Gilbert字体，文字人造黑白，如下图示意：

黑白字体是一项新技术，目前能够收费应用的字体非常少，浏览器的兼容性也是阻碍，有趣味的话你能够试试Bungee这个字体，是David Jonathan Ross设计并制作的，Google Fonts预览，Github我的项目地址：https://github.com/djrrb/bungee。

三、理解OpenType-SVG字体

OpenType SVG是一种字体格局，OpenType字体的全副或局部字形示意为SVG（可缩放矢量图形）图形。这容许在一个字形中显示多个色彩和突变。因为这些个性，咱们还将OpenType SVG字体称为“黑白字体”。

Adove的EmojiOne Color这个Emoji字体就是OpenType-SVG字体，EmojiOne Color是Adobe从Denis Denz设计的EmojiOne艺术作品中构建的开源黑白字体，由Rick Moby制作。该字体蕴含Unicode 9.0中的所有表情符号，并反对ZWJ、肤色多样性和国旗表情符号。。

OpenType SVG字体蕴含能够像其余OpenType字体一样通过CSS启用。无关拜访这些性能的概述，请参阅应用OpenType性能和CSS中OpenType性能语法。

Trajan Color Concept是Adobe第一个黑白字体（成果见下图），应用新的OpenType SVG规范构建，附加了跟多色彩款式，称为款式集，编号为1到20（ss01、ss02、ss03等）。

要将20种款式之一利用于文字上，能够应用CSS中的font-feature-settings属性进行设置，例如：

.Trajan-gold {

font-family: 'Trajan Color Concept';font-feature-settings: "ss01";

}
.Trajan-silver {

font-family: 'Trajan Color Concept';font-feature-settings: "ss02";

}

在不反对OpenType SVG字体的浏览器中，将显示兜底的款式（与序号为20的款式集成果雷同）。

对于font-feature-settings属性，我之前有专门写文章具体整顿过反对的超过半百的属性值：“CSS font-feature-settings 50+关键字属性值残缺介绍”

反对OpenType-SVG字体的应用程序

  • Photoshop CC 2017及其以上版本
  • Illustrator
  • Firefox 32及其以上版本
  • Microsoft Edge, Windows 10周年纪念版及以上版本
  • 在Windows 10中，DirectWrite和Direct2D平台组件容许在任何应用这些api的应用程序中反对OpenType SVG

已知的问题

  • 在导出为PDF或SVG后，图示符可能呈现在谬误的地位。
  • 在黑白SVG字体上利用通明、旋转或反射成果时，成果可能会失落，或者在创立字形轮廓时字符可能会来到其原始地位。
  • 垂直设置文本时，导出后的字符地位可能会不同。
  • 在螺旋门路搁置上设置文本时，字符可能会显示为搁置不正确。

四、结语及参考文档

分享一套字体设置集，针对不同的字体族，衬线字体，无衬线字体和等宽字体：

.font-sans {

font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

}
.font-serif {

font-family: Georgia, Cambria, "Times New Roman", Times, serif;

}
.font-mono {

font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

别离适宜用在注释显示、题目显示和代码显示中。

参考文档

  • OpenType-SVG color fonts
  • System Font Stack
  • It All Started With Emoji: Color Typography on the Web
  • CSS Color Emoji Stack

最初，有些Emoji字符在编辑器是个方块，看得脑壳疼，能够应用我做的这个char字符转换小工具变成HTML辨认的unicode格局。

就说这么多，心愿本文内容能够最你的学习有所帮忙。