CSS 如何在 Bootstrap 4 中使用不同的字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47081220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use different fonts in Bootstrap 4?
提问by CodeMan
I'm a newbie. I know I can assign different fonts for Bootstrap 4 like this default,
我是新手。我知道我可以像这个默认值一样为 Bootstrap 4 分配不同的字体，
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
What I want to know if I try to build a website with two font pairing for example,
例如，如果我尝试使用两种字体配对来构建网站，我想知道什么，
font-family: "Roboto", "Open Sans";
How would the above code affect elements of Bootstrap 4. Which elements will get Roboto or Open Sans.
上述代码将如何影响 Bootstrap 4 的元素。哪些元素将获得 Roboto 或 Open Sans。
回答by Syed
For scssusers:
对于scss用户：
Say you picked google fonts from here (pick less to load page fast): https://fonts.google.com/specimen/Roboto
假设您从这里选择了 google 字体（选择较少以快速加载页面）：https: //fonts.google.com/specimen/Roboto
And, placed it in your index.htmlin <head>:
并且，把它放在你的index.htmlin 中<head>：
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
Or, placed it in your stylesheet:
或者，将它放在您的样式表中：
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
</style>
and in scss do this:
并在 scss 中这样做：
$font-family-base: 'Roboto', sans-serif; // add this line first before importing bootstrap
@import "~bootstrap/scss/bootstrap";
that's it.
就是这样。
回答by Dario
You can override the bootstrap classes with your own css rules.
您可以使用自己的 css 规则覆盖引导程序类。
For example:
例如：
p {
font-family: "Roboto", sans-serif;
}
回答by Hyman Isaacs
This would be assigned in whatever element you are trying to style, so for example:
这将在您尝试设置样式的任何元素中分配，例如：
h1,h2,h3,h4,h5,h6 {
font-family: "Roboto";
}
This would assign Roboto to all the Headings...
这会将 Roboto 分配给所有标题......
回答by Manoj
You can also use bootstraps sass variables to change the default font-family.
This is what default value is
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
您还可以使用 bootstraps 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;
$font-family-sans-serif: Roboto;
You can change it to whatever you want and build it using sass compiler.
您可以将其更改为您想要的任何内容并使用 sass 编译器构建它。
回答by Jerry King
<p class="text-monospace">This is in monospace</p>Change a selection to our monospace font stack with .text-monospace.
<p class="text-monospace">This is in monospace</p>使用 .text-monospace 将选择更改为我们的等宽字体堆栈。
回答by Sid Khanye
In addition, you can also specify for which paragraphs should each font be applied:
此外，您还可以指定每种字体应用于哪些段落：
<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";
}
Hope this helps.
希望这可以帮助。
