html - 尽管 URL 正确，但仍继续获取 "Failed to decode downloaded font"

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 字体站点链接 - 如果可行，它将提供其他问题的线索。