Question

我正在尝试嵌入字体，问题是它只是在Firefox中显示，而不是在Internet Explorer中显示。

@font-face {
font-family: capture_it;
src: url('fonts/Capture_it.eot');
src: local('Comfortaa_it'),
    url('fonts/Capture_it.ttf') format('truetype'); 
}

非常感谢任何帮助。

谢谢，

enne

Answer 1

字体表格语法很棘手，特别是对于IE。请使用我们在这里开发的，经过跨浏览器测试的。 http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

看起来像这样：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

Answer 2

不同的浏览器支持不同的字体格式。您可以使用http://www.fontsquirrel.com/fontface/generator生成所有格式以获得最佳的跨浏览器支持。

以下内容来自上面列出的网址：

TTF ：原始TrueType文件，旨在让您在屏幕上看起来不错。

EOT Lite ：只有Internet Explorer支持EOT。此EOT类型是未压缩的，与TTF的文件大小相同。

EOT压缩：使用LZ压缩压缩EOT。文件大小通常小于WOFF。

WOFF ：使用gzip压缩的跨浏览器，仅限网络的字体格式。 IE9 +，FF3.6 +，Chrome 5 +

SVG ：这是iOS版本4.2之前所需的XML格式。

SVGZ ：这是SVG的gzip压缩版本。

Answer 3

我个人使用Google字体。如果你能找到一个足够接近你想要使用的那个，那么它们就是一个非常简单，快速和跨浏览器的字体解决方案。从Cufon转移到Google Fonts是一个很棒的主意。

值得一看 - http://www.google.com/webfonts#ChoosePlace:select

Answer 4

不完全但非常接近：

<style type="text/css">
@font-face {
 font-family: MyWebFont;
 src: url("font.eot") /* EOT file for IE (tested with ie8 and ie9)*/
}
@font-face {
 font-family: MyWebFont;
 src: url("font.ttf") /* TTF file for CSS3 browsers */
}
</style>

并制作来自：http://www.kirsle.net/wizards/ttf2eot.cgi

的eot文件

css - 为IE和FF嵌入字体

4 个答案: