font-face 不适用于所有浏览器答案

【问题标题】：font-face not working on all browsersfont-face 不适用于所有浏览器
【发布时间】：2016-10-13 02:05:18
【问题描述】：

我尝试使用 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

希望你能帮上忙！提前致谢

干杯

恩里科

【问题讨论】：

您的字体不在 stiles.css 文件中（我无法通过引用将它们加载到浏览器中），它们在哪里？
它们在一个文件夹中，但既然你问了这个问题，我将它们复制到 stile.css 文件所在的主文件夹中。这是正确的吗？还是不行……

标签： html css cross-browser font-face

【解决方案1】：

我看到了答案，您错误地调用了字体系列。确保使用@font-face font-family 声明。在这种情况下，请使用“robotoblack”而不是“roboto-black”。并在调用字体时在 CSS 中使用引号。

我还建议先调用@font-face，然后再调用css中的那些字体系列。

【讨论】：