如何更改Bootstrap字体系列?

时间:2018-01-28 03:48:45

标签: fonts bootstrap-4

所以我不明白如何更改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 Fonts样式表链接,然后在我的SCSS文件中调用了它{但它没有覆盖Bootstrap字体系列。

感谢任何帮助。如果有人有我无法找到的视频,请将其链接。谢谢!

1 个答案:

答案 0 :(得分:-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>

示例:https://codepen.io/ACqcE85feW/pen/gObeOdY