Css 使用SASS将购买的字体文件添加到我的WebStorm项目中。角度投影

我想知道我错过了什么？ 我的SASS文件中有以下定义：

@font-face
  font-family: "NHaasGroteskDSPro"
  src: url("fonts/NHaasGroteskDSPro-95Blk.otf") format("otf")

h1.ir-page-header
  font-family: "NHaasGroteskDSPro"
  font-weight: 800
  font-size: 30px

而相关的HTML元素是：

<h1 class="ir-page-header">some text</h1>

开发人员工具显示元素具有所需的类，并且它不会被其他css样式覆盖。 遗憾的是，显示的字体不是所需的字体

以下是fonts.com上字体页面的链接：

---

我原以为在网上找到答案很容易，但在花了2个小时完成了一项10分钟的任务后，我决定将我的问题发布给后代：——

我将@font-face改为：

@font-face
  font-family: "Neue Haas Grotesk"
  font-weight: 800
  font-style: normal
  src: url("fonts/NHaasGroteskDSPro-95Blk.otf") format("opentype")

---

它解决了这个问题。

更好的解决方案是使用webfonts。您需要不同的字体格式来支持不同的浏览器并实现最小的文件大小。如果是付费字体，请参见

CSS Webfont声明如下所示：

@font-face {
font-family: 'FontName';
src: url('/fonts/font-webfont.eot');
src: url('/fonts/font-webfont.eot?#iefix') format('embedded-opentype'),
     url('/fonts/font-webfont.woff2') format('woff2'),
     url('/fonts/font-webfont.woff') format('woff'),
     url('/fonts/font-webfont.ttf') format('truetype'),
     url('/fonts/font-webfont.svg#FontName') format('svg');
font-weight: normal;
font-style: normal;
}

---

这救了我！！