Question

我是新手。我知道我可以为Bootstrap 4指定不同的字体，如默认情况下，

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

如果我尝试构建一个包含两个字体配对的网站，我想知道，

font-family: "Roboto", "Open Sans";

上述代码如何影响Bootstrap 4的元素。哪些元素将获得Roboto或Open Sans。

Answer 1

对于scss用户：

假设您从这里选择了谷歌字体（选择较少以快速加载页面）： https://fonts.google.com/specimen/Roboto

并将其放在index.html中的<head>：

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

或者，将其放在样式表中：

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
</style>

并在scss中执行此操作：

$font-family-base: 'Roboto', sans-serif; // add this line first before importing bootstrap
@import "~bootstrap/scss/bootstrap";

就是这样。

Answer 2

您可以使用自己的css规则覆盖引导类。

例如：

p {
  font-family: "Roboto", sans-serif;
}

Answer 3

这将在您尝试设置样式的任何元素中分配，例如：

h1,h2,h3,h4,h5,h6 {
font-family: "Roboto";
}

这会将Roboto分配给所有标题......

Answer 4

此外，您还可以指定应该应用每种字体的段落：

<p class="sentenceA">First Paragraph with Roboto font applied to it.</p>
<p class="sentenceB">Second Paragraph with Open Sans font applied to it.</p>
<p class="sentenceC">Third Paragraph with Roboto and Open Sans fonts applied to it.</p>

//and in your stylesheet have something like:    

    .sentenceA p
    {
        font-family: "Roboto";
    }

    .sentenceB p
    {
      font-family: "Open Sans";
    }        

    .sentenceC p
    {
       font-family: "Roboto", "Open Sans";
    }

希望这有帮助。

Answer 5

您还可以使用bootstraps sass变量来更改默认的font-family。这是默认值 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-family-sans-serif: Roboto;

您可以将其更改为您想要的任何内容，并使用sass编译器构建它。

Answer 6

<p class="text-monospace">This is in monospace</p> 使用.text-monospace将选择更改为我们的等宽字体堆栈。

Answer 7

我猜您希望基本字体为“ Open Sans”，所有标题为“ Roboto”。如果您使用的是scss，则只需更改这两个变量；

$font-family-base:            'Open Sans', sans-serif;
$headings-font-family:        'Roboto', sans-serif;

Answer 8

由于BootStrap4使用jQuery在页面加载时查看其大多数功能，因此无法通过简单的 css 来更改字体系列。我们可以使用简单的 jQuery 代码来实现这一目标。

$(document).ready(function(){
$("div").css("font-family",'"Comic Sans MS", cursive, sans-serif');
})

以上代码段会将常规字体系列更改为“ Comic Sans MS”格式。

如何在Bootstrap 4中使用不同的字体？

8 个答案: