如何将字体添加到 bootstrap 主题中

Question

项目的基本结构如下：

其中fixed.html是主html文件，scss-variables.json是json文件，我们在其中定义了scss变量json 格式和 angular 代码将其转换为 sass.

现在我想将吉布森字体添加到这个主题中，我尝试通过在 app\lib\angular\docs\components 下添加字体文件然后在中使用它来添加它 app\lib\angular\docs\css\docs.css如下：

@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_0_0.eot');
  src: url('../components/gibson/313E30_0_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_0_0.woff') format('woff'), url('../components/gibson/313E30_0_0.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_1_0.eot');
  src: url('../components/gibson/313E30_1_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_1_0.woff') format('woff'), url('../components/gibson/313E30_1_0.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_2_0.eot');
  src: url('../components/gibson/313E30_2_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_2_0.woff') format('woff'), url('../components/gibson/313E30_2_0.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_3_0.eot');
  src: url('../components/gibson/313E30_3_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_3_0.woff') format('woff'), url('../components/gibson/313E30_3_0.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_4_0.eot');
  src: url('../components/gibson/313E30_4_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_4_0.woff') format('woff'), url('../components/gibson/313E30_4_0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_5_0.eot');
  src: url('../components/gibson/313E30_5_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_5_0.woff') format('woff'), url('../components/gibson/313E30_5_0.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_6_0.eot');
  src: url('../components/gibson/313E30_6_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_6_0.woff') format('woff'), url('../components/gibson/313E30_6_0.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Gibson';
  src: url('../components/gibson/313E30_7_0.eot');
  src: url('../components/gibson/313E30_7_0.eot?#iefix') format('embedded-opentype'), url('../components/gibson/313E30_7_0.woff') format('woff'), url('../components/gibson/313E30_7_0.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

然后进一步定义 class where using font-family:'Gibson' 然后在 fixed.html 中分配那个 class 但是这个解决方案不起作用。

我的实现有什么问题？以及如何在 scss-variables.json 文件中使用 font-face 属性?

Answer 1

$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-base:            $font-family-sans-serif !default;

您需要覆盖 $font-family-sans-serif 或 $font-family-base 变量。它们在 _variables.scss 中定义。我已经覆盖 $font-family-sans-serif 因为我所有的字体都是 sans-serif.

$font-family-sans-serif: 'Gibson', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Answer 2

我先在S3中添加了字体，然后在bootstrap-editor\app\scss\reboot.scss中添加了@font-face url。我在哪里检查现在我可以通过添加它来使用我新创建的字体系列：

html
{
 font-family: Gibson
}

现在，当我从我的 class 中删除所有样式时，它使用此字体系列。

所以最后我在上面的文件中添加了字体。正如 mahan 在他的回答中所说，我使用 $font-family-sans-serif 来实现整个主题中的 Gibson。

如何将字体添加到 bootstrap 主题中

How to add font-face into a bootstrap theme

font-face

bootstrap-4