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

@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; }

这是我用来在每个浏览器中嵌入我的字体的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,div span { font-family: xyzfont,Arial; }

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

fontsquirrel可能是生成所需字体格式的最佳位置.

这个article解释了如何在SVG字体的主题标签之后找到要添加的字体ID.

如果有人问为什么？#iefix for IE6-IE8 browsers eot font,请参阅answer.