如何正确加载字体

Question

我将字体导入我的应用程序时遇到问题。我试过这个，但这不是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

我做错了什么 ？

Answer 1

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

@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;
    }