css - 如何正确加载字体

我在将字体导入到我的应用程序时遇到问题。我尝试了这个，但是idk不能正常工作，为什么它不起作用或出了点问题。

这是我的scss文件：

@font-face {
  font-family: "OpenSansBold";
  font-style: normal;
  font-weight: 800;

  src: url("../../webfonts/opensans/OpenSans-ExtraBold.eot");
  src: url("../../webfonts/opensans/OpenSans-ExtraBold.eot?#iefix") format("embedded-opentype"),
  url("../../webfonts/opensans/OpenSans-ExtraBold.woff2") format("woff2"),
  url("../../webfonts/opensans/OpenSans-ExtraBold.woff") format("woff"),
  url("../../webfonts/opensans/OpenSans-ExtraBold.svg#OpenSansExtrabold") format("svg");
}

这是我的文件结构：



控制台为我提供了以下内容：

Failed to decode downloaded font: http://localhost/webfonts/opensans/OpenSans-ExtraBold.woff2
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost/webfonts/opensans/OpenSans-ExtraBold.woff
(index):1 OTS parsing error: invalid version tag

我做错了什么 ？

最佳答案

试试这个代码。我想这会帮助你

@font-face {
      font-family: 'OpenSansBold';
      src: url('../webfonts/opensans/OpenSans-ExtraBold.eot');
      src: local('☺'), url('../webfonts/opensans/OpenSans-ExtraBold.woff') format('woff'), url('../webfonts/opensans/OpenSans-ExtraBold.ttf') format('truetype'), url('../webfonts/opensans/OpenSans-ExtraBold.svg') format('svg');
      font-style: normal;
      font-weight: 800;
    }

关于css - 如何正确加载字体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50264471/