Como usar fontes diferentes no Bootstrap 4?
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
O Que Eu quero saber se eu tentar construir um site com dois tipos de letra emparelhando, por exemplo,
font-family: "Roboto", "Open Sans";
Como é que o código acima afecta os elementos do Bootstrap 4. Que elementos vão apanhar o Roboto ou o Open Sans.
5 answers
Podes sobrepor as aulas de bootstrap com as tuas próprias regras css.
Por exemplo:
p {
font-family: "Roboto", sans-serif;
}
Isso seria atribuído em qualquer elemento que você está tentando estilo, então, por exemplo:
h1,h2,h3,h4,h5,h6 {
font-family: "Roboto";
}
Para scss utilizadores:
E, colocou-o no seu index.html em <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>
E na scss Faz isto:
$font-family-base: 'Roboto', sans-serif; // add this line first before importing bootstrap
@import "~bootstrap/scss/bootstrap";
Além disso, você também pode especificar para que parágrafos deve cada tipo de letra ser aplicado:
<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";
}
Você também pode usar variáveis sass de arranque para alterar a família de tipos de letra por omissão.
Este é o valor padrão
$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;