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

Question

我已经尝试了各种代码来嵌入自定义字体,最后似乎在上面的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)都是最受欢迎的.

Answer 1

这是我用来在每个浏览器中嵌入我的字体的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; }

您可以在此处了解字体浏览器支持.

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

该文章介绍了如何找到你的字体标识的主题标签为SVG字体后添加.

如果有人问为什么有?#iefixIE6-IE8浏览器eot字体,请参阅此答案.