不懂@字体面覆盖效果

http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/不懂@字体面覆盖效果

我发现对unicode-range为@font-face规则的文章，Firefox不支持unicode-range财产。但作者找到了一个解决方法，我不明白。

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

为什么在第一个版本（wihout在后退规则的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; 
}

来源

2013-02-22 timaschew

今天也来过这篇文章。它的“作品”如下：

Firefox的错误行为是：当unicode范围是GIVEN时，它会被忽略，字体会被应用到所有的字符。

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

以正确的方式支持unicode范围的浏览器，对给定的unicode范围使用第一个@ font-face声明，对给定的unicode范围使用第二个@ font-face - 而unicode范围第二个@ font-face指定一个字符，这个字符很少被任何人使用。这里没有任何东西被覆盖。

希望有帮助！（而且是正确的^^）

EDIT¹：也许我应该补充一下：这导致在Firefox中不显示“最佳possilbe和号”，而是宋体，和号。所描述的整个解决方案是一个备用解决方案，包括针对Firefox的特殊处理 - 不针对Firefox的Unicode-Range-Ampersand-Trick。

EDIT²：也许我还要补充一点，我才发现，这戏不支持Unicode的范围也（还）。所以它不仅仅是Firefox。

来源

2013-03-19 19:21:16 Darkwing

不懂@字体面覆盖效果

回答

相关问题