不懂@字體面覆蓋效果

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

不懂@字體面覆蓋效果

回答

相關問題