Die Verwendung von verschiedenen Schriftarten in der Bootstrap-4?

Ich bin ein Neuling. Ich weiß, ich kann vergeben Sie unterschiedliche Schriftarten für die Bootstrap-4, wie dieser Standard,

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

Was ich wissen will, wenn ich versuche, eine website zu bauen mit zwei font-Kopplung zum Beispiel,

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

Wie würde der obige code beeinflussen Elemente von Bootstrap 4. Die Elemente erhalten Roboto oder Open Sans.

  • Hängt davon ab, welche Klasse oder ist Sie vergeben, die neue font-Familie an. Sind Sie die Zuordnung zu h1? p? *? Was macht die Linien vor der font-Familie Aussehen?
  • Ich denke, du meinst, ich habe Sie zu vergeben wie nötig, um jedes element von Bootstrap sonst alles standardmäßig auf Roboto für das obige Beispiel?
  • Siehe die Antworten unten. Haben Sie klar, was ich damit meine.
InformationsquelleAutor CodeMan | 2017-11-02
  1. 4

    Für scss Benutzer:

    Sagen Sie abgeholt google fonts von hier (pick-weniger laden der Seite schnell):
    https://fonts.google.com/specimen/Roboto

    Und legte es in Ihre index.html im <head>: 

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

    Oder platziert es in Ihrem stylesheet:

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

    und in scss, dies zu tun:

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

    das ist es.

    InformationsquelleAutor Syed
  2. 2

    Können Sie überschreiben die bootstrap-Klassen mit eigenen css-Regeln.

    Beispiel:

    p {
  font-family: "Roboto", sans-serif;
}
    InformationsquelleAutor Dario
  3. 1

    Dies würde zugewiesen werden, in was auch immer element, das Sie versuchen, zu Stil, so zum Beispiel:

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

    Diese weisen Roboto zu allen Rubriken...

    InformationsquelleAutor Jack Isaacs
  4. 0

    Darüber hinaus können Sie auch angeben, für welche Paragraphen sollte jeder schriftart angewendet werden:

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

    Hoffe, das hilft.

    InformationsquelleAutor Sid Khanye
  5. 0

    Können Sie auch Stiefelriemen sass-Variablen zu ändern, die Standard-schriftart-Familie.
    Dies ist, was default-Wert ist
    $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;

    Können Sie es ändern, um was auch immer Sie möchten, und bauen Sie es mit sass-compiler.

    InformationsquelleAutor Manoj
Schreibe einen Kommentar