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

Question

我已经下载Bootstrap magic theme

项目的基本结构如下:

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

现在我想将 gibson 字体添加到这个主题中，我尝试通过在 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;
}

然后进一步定义一个使用 font-family:'Gibson' 的类，然后在 fixed.html 中分配该类 但是这个解决方案不起作用。

我的实现有什么问题？以及如何在 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;