Question

我尝试使用face-font为我的页面添加几种字体，但不幸的是，即使我按照说明使其与浏览器兼容，它也只适用于Chrome和Safari，我无法工作为什么。我尝试了两种不同的方法。

第一个看起来像这样：

@font-face {
  font-family: 'robotoblack';
  src: url('roboto-black-webfont.eot'); /* per IE 5-8 */
  src: local('☺'), /* direttiva local per IE */
  url('roboto-black-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
        url('roboto-black-webfont.ttf') format('truetype'); /* Opera, Safari */
}

@font-face {
  font-family: 'robotomedium_italic';
  src: url('roboto-mediumitalic-webfont.eot'); /* per IE 5-8 */
  src: local('☺'), /* direttiva local per IE */
  url('roboto-mediumitalic-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
        url('roboto-mediumitalic-webfont.ttf') format('truetype'); /* Opera, Safari */
}

，第二个是这样的：

@font-face {
  font-family: 'robotoblack';
  src: url('roboto-black-webfont.eot'); /* IE9 Compat Modes */
  src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('roboto-black-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('roboto-black-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('roboto-black-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('roboto-black-webfont.svg#robotoblack') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'robotomedium_italic';
  src: url('roboto-mediumitalic-webfont.eot'); /* IE9 Compat Modes */
  src: url('roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('roboto-mediumitalic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('roboto-mediumitalic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('roboto-mediumitalic-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg'); /* Legacy iOS */
}

请问您能告诉我哪两种方法最好？有什么建议让它适用于所有浏览器吗？

如果您想查看示例，可以在此处找到：

enter link description here

希望你能帮忙！提前致谢

干杯

恩里科

Answer 1

我看到了答案，你正在错误地调用font-family。确保使用@ font-face font-family声明。在这种情况下，使用'robotoblack'而不是'roboto-black'。在调用字体时使用css中的引号。

我还建议首先调用@ font-face然后在css之后调用那些字体系列。

font-face无法在所有浏览器上运行

1 个答案: