CSS3 unicode-range在火狐中不起作用

Question

我使用CSS3属性unicode-range为不同的字符集设置不同的字体。Arial用于拉丁文字符，WebNazanin用于阿拉伯语/波斯语。它似乎在Chrome 29和IE10中工作，但在火狐23中不起作用，它仍然在火狐中使用Arial字体：

Chrome屏幕截图：

火狐截图

​

这是我的css：

@font-face {
    font-family: 'WebNazanin';
    src: url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.eot'),
    url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.otf') format('opentype'),url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.woff') format('woff'),
    url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.ttf') format('truetype'),
    url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.svg') format('svg');
}
@font-face {
    font-family:'WebNazanin';
    src: local('Times New Roman');
    unicode-range: U+41-7F;

}

JSFiddle：http://jsfiddle.net/maysamsh/t9MpF/

Answer 1

你说得对。火狐不支持unicode-range。

兼容性

他们正在研究这个问题。从4年开始。

如果这对您来说真的很重要，那么您可能需要搜索一个javascript解决方案(比如查看每个字符，插入样式的span等.)。但这可能是明智的缓慢。

更新

它现在已实现，但默认情况下未启用。您可以使用about:config标志(layout.css.unicode-range.enabled)启用它。

Answer 2

它很古老，但一个简单的解决方案是：

font-family: WebNazanin, Arial;

我总是使用这种方法，它将显示阿拉伯语或波斯语字符的WebNazanin和拉丁语的Arial。