Css3 @fontface不支持Chrome 17和Firefox 10 [英] Css3 @fontface is not working with Chrome 17 and Firefox 10
问题描述
我试试这段代码对于阿拉伯字体的@fontface:
@ font-face {
font-family:'MothnnaFont';
src:url('fonts / mothnna.eot'); / * IE9兼容模式* /
src:url('fonts / mothnna.eot?#iefix')format('embedded-opentype'),/ * IE6-IE8 * /
url /mothnna.woff')format('woff'),/ * Modern Browsers * /
url('fonts / mothnna.ttf')format('truetype'),/ * Safari,Android,iOS * /
url('fonts / mothnna.svg#svgMothnnaFont')format('svg'); / *旧版iOS * /
}
demo:
.demo
{
font-family:'MothnnaFont',Sans-Serif;
width:800px;
margin:10px auto;
text-align:center;
border:1px solid#666;
padding:10px
direction:rtl;
}
此代码正在使用ie,但它不工作在firefox 10或chrome 17
以下是演示。顺便说一下,fontsquirrel也使用这个语法作为默认语法。
I'm trying this code For the @fontface for an arabic font :
@font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
url('fonts/mothnna.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}
I'm using the font in a class named demo :
.demo
{
font-family:'MothnnaFont',Sans-Serif;
width:800px;
margin:10px auto;
text-align:center;
border:1px solid #666;
padding:10px;
direction: rtl;
}
This code is working on ie but it's not working on firefox 10 or chrome 17
Here is a demo http://tmr.hyperphp.com/font/demo.html
Here is how the font should look like
So anybody can help me to make this font appear a cross all browsers ?
Solved: just downloaded the font and converted it again and it's all working now thank you all for helping
This syntax of embedding web-fonts is not bulletproof anymore. Try using the Fontspring syntax instead:
@font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
url('fonts/mothnna.woff') format('woff'),
url('fonts/mothnna.ttf') format('truetype'),
url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}
It's just the first double appearance of the "src"-attribute you have to fix.
This will solve your problem.
For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.
这篇关于Css3 @fontface不支持Chrome 17和Firefox 10的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!