使用 SASS 将购买的字体文件添加到我的 WebStorm 项目中。 Angular 项目

Question

我想知道我在这里错过了什么？我的 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>

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

这里是 fonts.com 字体页面的 link： http://www.fonts.com/font/linotype/neue-haas-grotesk/display-family-pack

我认为在网上很容易找到答案，但在花了 2 小时完成 10 分钟的任务后，我决定 post 我的问题留给后代 :-)

Answer 1

好吧，我将@font-face 更改为：

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

它解决了问题。

Answer 2

更好的解决方案是使用网络字体。您需要不同的字体格式来支持不同的浏览器并实现最小的文件大小。如果是付费字体，请看http://www.fonts.com/web-fonts.

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

使用 SASS 将购买的字体文件添加到我的 WebStorm 项目中。 Angular 项目

Add a bought font file to my WebStorm project using SASS. Angular Project

css

font-face