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 Squirrel。那也行不通。

@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 中的字体格式。这样，您的布局将通过所有主要的Web浏览器正确显示。

你的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;

}

@ font-face在IE8中不起作用但在chrome，firefox中工作？

3 个答案: