如果 emoji 字体列在 sans-serif 之后，什么时候可以使用？

Question

我的理解是 sans-serif 会给你操作系统默认的 sans-serif 字体，并且每个 OS 都会支持它。 sans-serif 后列出的 emoji 字体在什么情况下可以访问？

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

见Fallback fonts on special characters"What you described is the default behaviour of a browser - it should naturally fall back to basic font for missing characters. However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range"

因此，如果较早的字体不包含这些字符（或者通过@font-face 规则中的 unicode-range 语句屏蔽了这些字符），它会回退到包含这些字符的字体。

@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;
}

在上面的示例中 (see jsfiddle)，我只将奇数大写字母 (ACEGIKMOQSUWY) 和偶数小写字母 (bdfhjlnprtvxz) 显示为 Times New Roman。

Answer 2

颠倒顺序。您喜欢的字体首先出现，然后是后备字体。一旦找到可用的字体，浏览器就会停止查看字体列表。

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

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

结果是，即使我在 class .fourth 的 font-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>

如果 emoji 字体列在 sans-serif 之后，什么时候可以使用？

When do emoji fonts work if listed after sans-serif?

css

fonts

operating-system

font-family

emoji

Github 2017-08-09