如果表情符号字体列在无衬线字体之后，什么时候起作用?

Question

我的理解是，sans-serif会给你操作系统默认sans-serif字体，每个操作系统都会支持这一点。在什么情况下可以访问sans-serif后面列出的表情符号字体？

Github 2017-08-09

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

Answer 1

请参阅特殊字符上的回退字体 "您描述的是浏览器的默认行为 - 对于缺少的字符，它自然应该回退到基本字体。但是，有时自定义字体使用空白字符，在这种情况下，您可以尝试使用 unicode 范围">

因此，如果早期字体不包含字符(或者这些字符由@font面规则中的 unicode 范围语句屏蔽(，则它会回退到包含字符的字体。

@font-face {
font-family: 'Sometimes';
src: local('Times New Roman');
unicode-range:
/*upper*/ U+41, U+43, U+45, U+47, U+49, U+4B, U+4D, U+4F, U+51, U+53, U+55, U+57, U+59,
/*lower*/ U+62, U+64, U+66, U+68, U+6A, U+6C, U+6E, U+70, U+72, U+74, U+76, U+78, U+7A ;
}
p {
font-family: Sometimes, cursive;
}

在上面的例子中(参见jsfiddle(，我只制作了奇数大写字母(ACEGIKMOQSUWY(和小写字母(bdfhjlnprtvxz(以显示为Times New Roman。

Answer 2

颠倒顺序。您喜欢的字体排在最前面，然后是备用字体。浏览器一旦找到有效的内容，就会停止查看字体列表。

我在下面设置了一个示例，其中.first.second和.third都使用自定义字体。

.fourth也列出了这些字体，但我通过先加载它来将我的首选项设置为sans-serif。

结果是，即使我在列表中有所有这些自定义字体，用于类.fourthfont-family，浏览器也会停止在sans-serif.

span {
font-size: 30px;
display: block;
margin: 2em auto;
}
.first {
font-family: 'Caveat';
}
.second {
font-family: 'Cedarville Cursive';
}
.third {
font-family: 'Permanent Marker';
}
.fourth {
font-family: sans-serif, 'Permanent Marker', 'Cedarville Cursive', 'Caveat';
}

<link href="https://fonts.googleapis.com/css?family=Caveat|Cedarville+Cursive|Permanent+Marker" rel="stylesheet">
<span class="first">I haz kode </span>
<span class="second">I haz kode </span>
<span class="third">I haz kode </span>
<span class="fourth">I haz kode </span>