乐趣区

关于javascript:关于CSS-emoji字体和OpenTypeSVG我所知道的一些事

jiezi

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

一、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 格局。

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

退出移动版