@ font-face在IE8中不工作，但在Chrome，Firefox中工作？

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

來源

2014-01-24 user3214024

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

可能重複（HTTP：//計算器。 com/questions/7582401/css-font-face-not-working-in-ie8） – pasine

每個瀏覽器都有自己喜歡的字體類型。看看[Font Squirrel]（http://www.fontsquirrel.com/tools/webfont-generator）來創建完美的@ font-face規則。 – pasine

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'); 
}

來源

2014-01-24 10:20:18 spiel

我會建議您使用的字體在.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。

來源

2014-01-24 10:20:56

我試過了。使用字體松鼠轉換字體並嘗試相同的佈局。沒有工作。 – user3214024

@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; 

}

來源

2014-01-24 10:24:28

謝謝。有效。 – user3214024

歡迎您:-) –

@ font-face在IE8中不工作，但在Chrome，Firefox中工作？

回答

相關問題