使用 CSS 包含自定义字体以使其与大多数浏览器兼容的最佳方法是什么？

我尝试了各种代码来嵌入自定义字体，最后以下似乎可以在上面的 FF 和 IE8 中工作。但IE7不支持。

@font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot?') format('eot'), 
     url('fonts/abc-font.woff') format('woff'), 
     url('fonts/abc-font.ttf') format('truetype');
}

h1, h2, h3, div span { font-family: 'xyzfont', Georgia, Arial; }

任何使其更加兼容的建议（例如 IE7）非常受欢迎。

这是我用来在每个浏览器中嵌入字体的 css，希望有帮助：

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

另请注意，您可以设置不带引号的字体系列，如下所示：

h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }

您可以了解字体浏览器支持here.

字体松鼠可能是生成您需要的每种字体格式的最佳场所。

This article解释如何查找要添加到 SVG 字体主题标签后的字体 ID。

如果有人问为什么会有?#iefix对于 IE6-IE8 浏览器 eot 字体，请参阅此answer.