不理解@字体覆盖效应

Question

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

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

我不明白该怎么做。第二个(回退)规则也使用unicode-range。那么，为什么要解决这个问题，将字库应用于所有字体字符呢？

以及为什么在第一个版本中(在回退规则中删除unicode-range )它应该工作。我希望第二条规则是每次都适用于所有浏览器？

我们可以使用CSS级联的规则来确保如果不支持unicode-range，我们就会得到一个合理的回退字体。理想的情况是，如果我们能够在没有实现Unicode范围的情况下，用第二个规则来覆盖@font-face规则。

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

Answer 1

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

Firefox的错误行为是:当给定unicode范围时，它将被忽略，字体将被应用于所有字符。

因此，当使用unicode范围设置2次@字体-face时，使用第二个@字体-face，覆盖第一个@字体-face 'Ampersand‘(CSS就是这样做的)，而firefox bug“负责”对所有字符应用Arial (因为给出了unicode范围)。我们有2次使用整个unicode-范围(在Firefox中)的@字体，用于“Ampersand”。因此，第二种方法是由CSS应用的。这就是为什么它起作用了。

支持unicode范围的浏览器采用正确的方式，对给定的unicode范围使用第一个@字体面声明，对给定的unicode范围使用第二个@字体面，而第二个@字体的unicode范围指定一个字符，这几乎没有人使用过。这里没有任何东西会被覆盖。

希望这能帮上忙！(而且是对的。( ^^)

编辑:也许我应该添加:这导致Firefox没有显示“最好的possilbe”，而是一个Ampersand。所描述的整个解决方案是一个后备解决方案，包括对Firefox的特殊处理--而不是为Firefox标记Unicode Ampersand-技巧。

编辑2:也许我也应该加上，我刚刚发现，Opera也不支持unicode-范围(还)。所以不仅仅是火狐。