@font-face 不能在 IE8 中工作，但可以在 chrome、firefox 中工作？

Question

css代码：

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

它在 chrome 和 firefox 中运行良好。但在 IE8 中没有。

当我在 css 中为 IE 添加 .eot 字体时

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

但我还是不明白，字体在“fonts-sky”文件夹中

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

但在 css @font-face 中我们只是简单地使用

sky2.woff
sky2.eot
sky2.svg
sky2.ttf

Answer 1

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

这是我会使用的：

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

Answer 2

我建议您使用 .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;
}

例如，Google Fonts 使用 .woff 格式开发其 webfont 套件，如 here 所示。

Answer 3

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

}