css - 为IE和FF嵌入字体

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:Raw TrueType文件,旨​​在在屏幕上显示良好.

EOT Lite:EOT仅受Internet Explorer支持.此EOT类型是未压缩的,与TTF的文件大小相同.

EOT压缩:EOT压缩采用LZ压缩.文件大小通常小于WOFF.

WOFF:使用gzip压缩的跨浏览器,仅限Web的字体格式.IE9 +,FF3.6 +,Chrome 5+

SVG:这是iOS版本4.2之前所需的XML格式.

SVGZ:这是SVG的gzip压缩版本.