web-dev-qa-db-fra.com

Comment utiliser différentes polices dans Bootstrap 4?

Je suis débutant. Je sais que je peux attribuer différentes polices pour Bootstrap 4 comme cette valeur par défaut,

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

Ce que je veux savoir si j'essaie de créer un site Web avec deux paires de polices par exemple,

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

Comment le code ci-dessus affecterait-il les éléments de Bootstrap 4. Quels éléments obtiendront Roboto ou Open Sans.

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4twitter-bootstrap-4-beta
5
CodeMan

Pour les utilisateurs de scss:

Supposons que vous ayez choisi les polices Google à partir d'ici (choisissez moins pour charger la page rapidement): https://fonts.google.com/specimen/Roboto

Et, placez-le dans votre index.html dans <head>:

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

Ou, placez-le dans votre feuille de style:

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

et en scss faites ceci:

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

c'est tout.

9
Syed

Vous pouvez remplacer les classes bootstrap avec vos propres règles css.

Par exemple:

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

Cela serait attribué dans l'élément que vous essayez de styliser, par exemple:

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

Cela assignerait Roboto à toutes les rubriques ...

1
Jack Isaacs

Vous pouvez également utiliser des variables sass de bootstraps pour modifier la famille de polices par défaut. C'est ce que la valeur par défaut est $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;

Vous pouvez le changer en ce que vous voulez et le construire en utilisant le compilateur sass.

1
Manoj

De plus, vous pouvez également spécifier pour quels paragraphes chaque police doit être appliquée:

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

J'espère que cela t'aides.

0
Sid Khanye

<p class="text-monospace">This is in monospace</p> Modifiez une sélection dans notre pile de polices monospace avec .text-monospace.

0
Jerry King