2

我正在尝试嵌入字体，问题是它只显示在 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'); 
}

非常感谢任何帮助。

谢谢，

安内

4

4 回答 4

10

字体语法很棘手，尤其是在 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 */
    }
于 2012-04-06T12:02:38.463 回答
8

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

以下来自上面包含的 url 上的表格：

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

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

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

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

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

SVGZ：这是 SVG 的压缩版本。

于 2012-04-06T09:26:51.683 回答
0

不完全但接近：

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

并从以下位置制作eot文件：http ://www.kirsle.net/wizards/ttf2eot.cgi

于 2013-04-03T10:16:55.300 回答
0

我个人会使用谷歌字体。如果您能找到一个与您想要使用的字体足够接近的字体，那么它们就是一种非常简单、快速且跨浏览器的字体解决方案。从 Cufon 迁移到 Google Fonts 是一个绝妙的主意。

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

于 2012-04-06T09:31:22.337 回答