Question

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

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

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

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

我们可以利用CSS级联的规则来确保if 我们不支持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;
}

Answer 1

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

Firefox的错误行为是：当unicode-range为IS GIVEN时，它会被忽略，而字体将被应用于所有字符。

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

以正确的方式支持unicode范围的浏览器，对给定的unicode-range使用第一个@ font-face声明，为给定的unicode-range使用第二个@ font-face - 而第二个的unicode-range @ font-face指定一个任何人都不会使用的角色。这里没有任何东西被级联覆盖。

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

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

EDIT²：也许我还应该添加，我刚刚发现，Opera也不支持unicode-range。所以它不仅仅是Firefox。

不明白@ font-face覆盖效果

1 个答案: