共计 5138 个字符,预计需要花费 13 分钟才能阅读完成。
本文是参考一些材料之后的碎碎念,可能比拟杂,可能比拟乱,可能没有什么逻辑,想到哪里说到哪里,如果有说的不精确的中央,欢送斧正。
一、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
这两个字体放在了最初。
有什么意义呢?
我能想到有重要的就两个场景。
- 用户在 windows 零碎上也装置了苹果的 emoji 字体,于是 Windows 零碎优先显示苹果的 emoji 表情。
- 一些老旧操作系统,例如 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 格局。
就说这么多,心愿本文内容能够最你的学习有所帮忙。