css - 不明白@font-face 覆盖效果

Question

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

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

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

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

We can make use of the rules of the CSS cascade to make sure that if unicode-range isn’t supported we get a sensible fallback font. What would be ideal is if we were able to follow up the @font-face rule with a second rule to override it if Unicode ranges aren’t implemented.

@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-range 时，它​​会被忽略，字体会应用于所有字符。

因此，当使用 unicode-range 设置 2 倍的 @font-face 时，使用第二个 @font-face，覆盖第一个 @font-face 'Ampersand'(CSS 这样做)，以及 firefox错误“负责”将 Arial 应用于所有字符(因为给出了 unicode-range)。对于整个 unicode 范围(在 Firefox 中)，我们有 2 倍的 @font-face for '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。