8

我尝试了各种代码来嵌入自定义字体，最后似乎在上面的 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）都非常受欢迎。

4

2 回答 2

19

这是我用来在每个浏览器中嵌入字体的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 字体的主题标签之后找到要添加的字体 ID。

如果有人问为什么有?#iefixIE6-IE8 浏览器 eot 字体，请参阅这个答案。

于 2013-09-18T12:34:54.813 回答
1

我使用此代码；）

@font-face {
  font-family: 'BBadr';
    src: url('fonts/BBadr/BBadr.eot'); /* IE9 Compat Modes */
    src: url('fonts/BBadr/BBadr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url("fonts/BBadr/BBadr.otf") format("opentype"), /* Open Type Font */
      url('fonts/BBadr/BBadr.woff') format('woff'),/* Pretty Modern Browsers */
      url('fonts/BBadr/BBadr.woff2') format('woff2'), /* Super Modern Browsers */
      url('fonts/BBadr/BBadr.ttf')  format('truetype'),/* Safari, Android, iOS */
      url('fonts/BBadr/BBadr.svg#BBadr') format('svg'); /* Legacy iOS */
}

你可以在线转换你的字体（ttf（使用这个网站： 简单的在线网络字体转换器：ttf otf woff woff2 eot svg otf with css stylesheet

转换字体并使用我的 css 代码（不使用站点的示例 css）

于 2017-03-30T18:03:12.597 回答