不懂@font-face 覆盖效果答案

【问题标题】：don't understand @font-face override effect不懂@font-face 覆盖效果
【发布时间】：2015-10-25 13:36:25
【问题描述】：

http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/

我发现一篇关于@font-face 规则的unicode-range 的文章，并且firefox 不支持unicode-range 属性。但是作者找到了一个解决方法，我不明白。

我不明白它应该如何工作。第二个（后备）规则也使用unicode-range。那么为什么要解决将 arial 字体应用于所有字体字符的问题呢？

以及为什么在第一个版本中（没有后备规则中的unicode-range）它应该可以工作。我希望第二条规则每次都适用于所有浏览器？

我们可以利用 CSS 级联的规则来确保如果不支持unicode-range 我们得到一个合理的后备字体。什么如果我们能够遵循@font-face 规则，那将是理想的如果没有 Unicode 范围，则使用第二条规则覆盖它实施。

@font-face {
    font-family: 'Ampersand';
    src: local('Baskerville'), local('Palatino'), local('Book Antiqua');
    unicode-range: U+26;
}
@font-face {
    /* Ampersand fallback font */
    font-family: 'Ampersand';
    src: local('Arial');
    unicode-range: U+270C;
}

【问题讨论】：

标签： css font-face unicode-range

【解决方案1】：

今天也看到了这篇文章。它“工作”如下：

Firefox 的错误行为是：当一个 unicode-range IS GIVEN 时，它被忽略并且字体被应用到所有字符。

因此，当使用 unicode-range 设置 2 倍 @font-face 时，将使用第二个 @font-face，覆盖第一个 @font-face 'Ampersand'（CSS 这样做）和 firefox错误“负责”将 Arial 应用于所有字符（因为给出了 unicode-range）。对于整个 unicode 范围（在 Firefox 中），我们有 2 倍的 @font-face 用于 'Ampersand'。所以第二个是由 CSS 应用的。这就是它起作用的原因。

正确支持 unicode-range 的浏览器，对给定的 unicode-range 使用第一个 @font-face 声明，对给定的 unicode-range 使用第二个 @font-face - 而第二个的 unicode-range @font-face 指定一个字符，几乎没有人使用过。此处的级联不会覆盖任何内容。

希望对您有所帮助！（而且是对的。^^）

编辑¹：也许我应该补充：这导致 Firefox 不显示“最好的可能与符号”，而是显示 Arial-与符号。所描述的整个解决方案是一个后备解决方案，包括对 Firefox 的特殊处理——不为 Firefox 启用 Unicode-Range-Ampersand-Trick。

EDIT²：也许我还应该补充一下，我刚刚发现，Opera 也不支持 unicode-range（还）。所以不仅仅是 Firefox。

【讨论】：