1

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

我找到了一篇关于unicode-rangefor@font-face规则的文章，并且 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;
}
4

1 回答 1

2

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

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

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

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

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

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

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

于 2013-03-19T19:21:16.273 回答