CSS3 unicode-range在Firefox中不起作用

我正在使用 CSS3属性unicode-range为不同的字符集设置不同的字体.拉丁字符的Arial和阿拉伯语/波斯语的WebNazanin.它似乎适用于Chrome 29和IE10但不适用于Firefox 23,它仍然在Firefox中使用Arial字体:

Chrome屏幕截图:

Firefox截图:

这是我的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;

}

JSfiddlehttp://jsfiddle.net/maysamsh/t9MpF/

解决方法

你是对的. Firefox不支持unicode-range.
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range#Browser_compatibility

他们正在努力.自4 years年起.

如果它对您来说非常重要,您可能需要搜索一个javascript解决方案(比如查看每个字符并插入样式化的跨度等等).但这可能会非常缓慢.

UPDATE

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效