如何更改引导字体系列？答案

【问题标题】：How To Change Bootstrap Font Family?如何更改引导字体系列？
【发布时间】：2020-01-09 04:47:23
【问题描述】：

所以我不明白如何更改 Bootstrap 字体系列。我已经搜索了答案并找到了这个链接：https://stackoverflow.com/a/29952126/9183058。我知道这个链接说明了要做什么，但它并没有简单地告诉我如何做。就像即使链接中有故障，我仍然无法理解它。

$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

我是否只是从 -apple-system 中完全删除所有内容，然后再添加 Google 字体链接？就像我不明白一样。而且我找不到任何视频教程。

我还在我的 HTML 中导入了 Google 字体样式表链接，然后在我的 SCSS 文件的 body { 中调用它，但它没有覆盖 Bootstrap 字体系列。

感谢任何帮助。如果有人有我没有找到的视频，请链接它。谢谢！

【问题讨论】：

【解决方案1】：

首先，从 Bootstrap 中获取起始模板，然后在 <head> 部分添加以下行：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

然后创建一个 CSS 文件并添加以下内容：

.Roboto-font {font-family: 'Roboto', sans-serif;}

现在你可以在你的 html <body> 部分使用这个字体了：

<p class="Roboto-font">This is text with my favourite font.</p>

【讨论】：