2014-01-24 176 views
0

CSS代码:@ font-face在IE8中不工作,但在Chrome,Firefox中工作?

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf'); 
} 

它在Chrome和Firefox的罚款。但不在IE8中。

当我添加.eot字体为IE在CSS

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf'); 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot'); 
} 

其作品在IE8但不是在Chrome和Firefox。

如何让它在所有浏览器中都能正常工作?

编辑

试过字体松鼠。那也不起作用。

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.ttf'); 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.eot'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.woff') format('woff'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.ttf') format('truetype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.svg#leb-webfont') format('svg'); 
} 

这一个工作。

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot'); 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot?#iefix') format('embedded-opentype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2.woff') format('woff'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf') format('truetype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2.svg#sky2-webfont') format('svg'); 
} 

但我仍然不明白,字体是在“字体的天空”文件夹

sky2-webfont.woff 
sky2-webfont.ttf 
sky2-webfont.eot 
sky2-webfont.svg 

但是在CSS @字体面,我们使用的是简单的

sky2.woff 
sky2.eot 
sky2.svg 
sky2.ttf 
+0

http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/的[CSS @字体面不工作IE8] – LorDex

+1

可能重复(HTTP://计算器。 com/questions/7582401/css-font-face-not-working-in-ie8) – pasine

+0

每个浏览器都有自己喜欢的字体类型。看看[Font Squirrel](http://www.fontsquirrel.com/tools/webfont-generator)来创建完美的@ font-face规则。 – pasine

回答

0

IE8只有部分支持,你可以在这里看到:http://caniuse.com/fontface

This i就是我想要的使用:

@font-face { 
    font-family: 'sky2-webfont'; 
    src: url('font.eot'); 
    src: local('☺'), 
     url('font.woff') format('woff'), 
     url('font.ttf') format('truetype'), 
     url('font.svg#webfontzVgQprWy') format('svg'); 
} 
0

我会建议您使用的字体在.eot.woff的.ttf.SVG格式。这样,您的布局将通过所有主流网页浏览器正确显示。

你的CSS会是这样的:

@font-face { 
    font-family: 'DroidSansRegular'; 
    src: url('droid-sans/DroidSans-webfont.eot'); 
    src: url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), 
     url('droid-sans/DroidSans-webfont.woff') format('woff'), 
     url('droid-sans/DroidSans-webfont.ttf') format('truetype'), 
     url('droid-sans/DroidSans-webfont.svg#DroidSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

举例来说,谷歌的字体使用.woff格式开发的web字体包,可以看出here

+0

我试过了。使用字体松鼠转换字体并尝试相同的布局。没有工作。 – user3214024

0
@font-face { 
    font-family: 'sky2'; 
    src: url('sky2.eot'); 
    src: url('sky2.eot?#iefix') format('embedded-opentype'), 
     url('sky2.woff') format('woff'), 
     url('sky2.ttf') format('truetype'), 
     url('sky2.svg#sky2') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
+0

谢谢。有效。 – user3214024

+0

欢迎您:-) –

相关问题