it-swarm.com.de

Anwenden einer einzelnen Schriftart mit CSS auf eine gesamte Website

Ich möchte eine einzige Schriftart mit dem Namen "Algerian" auf meiner gesamten Website verwenden. Ich muss also alle HTML-Tags ändern und möchte keinen anderen Code für verschiedene Tags schreiben: 

button{font-family:Algerian;}
div{font-family:Algerian;}

Die unten beschriebene Methode wird ebenfalls dringend empfohlen:

div,button,span,strong{font-family:Algerian;}
79
Michelle Smith

Fügen Sie die font-family-Deklaration in einen body-Selektor ein:

body {
  font-family: Algerian;
}

Alle Elemente auf Ihrer Seite erben dann diese Schriftfamilie (es sei denn, Sie überschreiben sie natürlich später). 

86
Jan Hančič
*{font-family:Algerian;}

TUN Sie so

92
user1432124

Der universelle Selektor * bezieht sich auf alle Elemente. Dieses CSS erledigt das für Sie:

*{
  font-family:Algerian;
}

Wenn Sie jedoch FontAwesome - Symbole oder Symbole verwenden, für die eine eigene Schriftfamilie erforderlich ist, werden die Symbole leider zerstört, und die erforderliche Ansicht wird nicht angezeigt.

Um dies zu vermeiden, können Sie den :not-Selektor verwenden. Ein Beispiel für das fontawesome-Symbol ist <i class="fa fa-bluetooth"></i>. Sie können also einfach Folgendes verwenden:

*:not(i){
  font-family:Algerian;
}

dadurch wird diese Familie auf alle Elemente im Dokument mit Ausnahme der Elemente mit dem Tagnamen <i> angewendet. Sie können dies auch für Klassen tun:

*:not(.fa){
  font-family:Algerian;
}

dadurch wird diese Familie auf alle Elemente im Dokument angewendet, mit Ausnahme der Elemente mit der Klasse "fa", die sich auf die fontawesome Standardklasse () bezieht. Sie können auch mehrere Klassen wie folgt anvisieren:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
37
Salam El-Banna
* { font-family: Algerian; }

Der Universalselektor * verweist auf ein beliebiges Element.

16

Stellen Sie sicher, dass mobile Geräte die Schriftart nicht mit ihrer Standardschriftart ändern, indem Sie neben dem Universalselektor eine wichtige Rolle verwenden.

* { font-family: Algerian !important;}
16
gabitzish

Da wahrscheinlich eine andere Schriftart bereits vom Browser für Formularelemente definiert wird, gibt es zwei Möglichkeiten, diese Schriftart überall zu verwenden:

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

Es gibt immer noch eine Monospace-Schriftart für Elemente wie pre/code, kbd usw. Wenn Sie diese Elemente jedoch verwenden, sollten Sie dort eine Monospace-Schriftart verwenden.

Wichtiger Hinweis: Wenn nur wenige Benutzer diese Schriftart auf ihrem Betriebssystem installiert haben, wird die zweite Schriftart in der Liste verwendet. Hier haben Sie keine zweite Schriftart definiert, also wird die Standard-Serifenschriftart verwendet, und es wird Times, Times New Roman sein, außer vielleicht unter Linux.
Zwei Optionen: @ font-face verwenden, wenn Ihre Schriftart nicht als herunterladbare Schriftart verwendet werden kann, oder Fallbacks hinzufügen: eine zweite, eine dritte usw. und schließlich eine Standardfamilie (sans-serif, cursive ( ), Monospace oder Serif). Die erste der im Betriebssystem des Benutzers vorhandenen Liste wird verwendet.

(*) Standardcursiv für Windows ist Comic Sans. Außer, wenn Sie Windows-Benutzer trollen möchten, tun Sie das nicht :) Diese Schriftart ist schrecklich, außer bei den Geburtstagen Ihrer Kinder, wo sie willkommen ist.

2
FelipeAls

Bitte platzieren Sie diese in den Kopf Ihrer Seite (n), wenn der "Körper" die Verwendung von 1 und der gleichen Schriftart erfordert:

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

Alles zwischen den Tags <body> und </body>wird die gleiche Schriftart haben

1
PICwebs

Ok, also hatte ich dieses Problem, wo ich verschiedene Optionen ausprobierte. 

Die Schriftart, die ich verwende, ist Ubuntu-LI. Ich habe in meinem Arbeitsverzeichnis einen Schriftartordner erstellt. unter den Ordner-Schriftarten

Ich konnte es anwenden ... irgendwann ist hier mein Arbeitscode

Ich wollte, dass sich dies auf meine gesamte Website bezieht, also habe ich es an die Spitze des CSS-Dokuments gestellt. vor allen Div-Tags (nicht, dass es darauf ankommt, wissen Sie einfach, dass alle von Ihnen zugewiesenen Schriftarten Vorrang haben)

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

Wenn ich dann wollte, dass alle meine H1-Tags etwas anderes sind, sagen wir Sans sarif, würde ich etwas tun 

h1{
   font-family: Sans-sarif;
}

Von diesem Fall wären nur meine H1-Tags die Sans-Sarif-Schrift und der Rest meiner Seite wäre die Ubuntu-LI-Schrift

1
Lee Alderman

in Bootstrap sagt der Webinspektor .__, dass die Überschriften auf "erben" eingestellt sind.

alles, was ich brauchte, um meine Seite auf die neue Schriftart einzustellen, war 

div, p {font-family: Algerian}

das ist in .scss

0
austin