4

我是新手。我知道我可以像这个默认值一样为 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。

4

7 回答 7

18

对于scss用户：

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

并且，将其放在您的index.htmlin 中<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";

而已。

于 2018-05-25T05:37:09.480 回答
2

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

例如：

p {
  font-family: "Roboto", sans-serif;
}
于 2017-11-02T17:29:37.957 回答
1

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

$font-family-base:            'Open Sans', sans-serif;
$headings-font-family:        'Roboto', sans-serif;
于 2020-06-04T11:08:19.850 回答
1

您还可以使用引导 sass 变量来更改默认字体系列。这是默认值 $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 编译器构建它。

于 2018-05-10T07:32:14.467 回答
1

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

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

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

于 2017-11-02T17:29:29.030 回答
0

此外，您还可以指定每种字体应应用于哪些段落：

<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";
    }

希望这可以帮助。

于 2017-11-02T19:00:48.160 回答
-4

由于 BootStrap4 使用 jQuery 在页面加载时查看其大部分功能，因此无法通过简单的css更改 font-family 。我们可以使用简单的jQuery代码来实现这一点。

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

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

于 2020-06-14T14:45:52.423 回答