时间戳

首页 > 解决方案 > 如何将字体添加到引导主题中

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

问题描述

我已经下载了Bootstrap 魔法主题

项目的基本结构如下：

项目

其中 fixed.html 是主 html 文件，scss-variables.json 是 json 文件，我们在其中以 json 格式定义 scss 变量，然后 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;
}

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

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

标签： bootstrap-4font-face

解决方案

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

推荐阅读