Question

我检查了所有的SO，但是在我的具体情况下无法弄清楚出了什么问题。

这是我的CSS：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(/assets/fonts/OpenSans-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(/assets/fonts/OpenSans-Regular.ttf) format('truetype');
}

但Chrome不断在控制台中抛出Failed to decode downloaded font和OTS parsing error: DSIG: invalid table offset错误。因此，字体未正确应用于元素。字体的URL肯定是正确的，所以我不确定这里出了什么问题。

这只发生在Chrome中。它在Safari中运行良好。

Answer 1

我认为你的url属性应该丢失第一个/所以它看起来像这样 - 只是为了尝试排除故障，给它一个镜头。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(assets/fonts/OpenSans-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(assets/fonts/OpenSans-Regular.ttf) format('truetype');
}

另外，为了便于排查，请尝试直接从Google字体网站进行链接 - 如果可行的话，它将提供其他问题的线索。

尽管URL正确，仍然会“无法解码下载的字体”

1 个答案: