So wenden Sie globale Schriftarten auf das gesamte HTML-Dokument an

175

Ich habe eine HTML-Seite, die Text und Formatierungen enthält. Ich möchte, dass es dieselbe Schriftfamilie und dieselbe Textgröße hat, wobei alle inneren Formatierungen von Text ignoriert werden.

Ich möchte ein globales Schriftformat für die HTML-Seite festlegen.

Wie kann ich das erreichen?

html css font-family Schätzchen
quelle

Antworten:

263

Sie sollten in der Lage sein, das Sternchen und die !importantElemente in CSS zu verwenden.

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

Das Sternchen passt zu allem (Sie könnten wahrscheinlich auch ohne das davonkommen html).

Die !importantsorgt dafür , dass nichts kann außer Kraft setzen , was Sie in diesem Stil festgelegt haben (es sei denn , es ist auch wichtig). (Dies soll Ihnen dabei helfen, "die innere Formatierung von Text zu ignorieren" - was ich so verstanden habe, dass andere Stile diese nicht überschreiben konnten)

Der Rest des Stils innerhalb der Klammern ist wie bei jedem anderen Styling und Sie können dort tun, was Sie möchten. Ich habe mich entschieden, die Schriftgröße, Farbe und Familie als Beispiel zu ändern.

Amadiere
quelle
24
+1 !importantist nützlich, aber es kann ein bisschen "als Monster" werden, wenn es überbeansprucht wird.
StuperUser
2
+1 für eine großartige Verwendung von !important. Es muss immer als letzte Option verwendet werden.
dShringi
3
Beachten Sie, dass die Verwendung von !importanthier auf die Anforderung des Originalplakats zurückzuführen ist, "dieselbe Schriftfamilie und dieselbe Textgröße zu haben, wobei alle inneren Formatierungen von Text ignoriert werden". Wenn Sie diese Anforderung nicht haben, möchten Sie sie nicht verwenden !important.
Seth
1
Die Verwendung von html * {}oder body * {}hilft Ihnen dabei, ein Überschreiben durch spezifischere body p {}Stylesheets zu vermeiden . body p {}ist spezifischer als body {}, daher ist das Sternchen hier ein wichtiges Element.
YoYo
1
Ich denke, Sie können htmlvon html *hier weglassen
JonnyRaa
44

Ich denke, die beste Vorgehensweise besteht darin, die Schriftart auf den Körper einzustellen:

body {
    font: normal 10px Verdana, Arial, sans-serif;
}

und wenn Sie sich entscheiden, es für ein Element zu ändern, kann es leicht überschrieben werden:

h2, h3 {
    font-size: 14px;
}
Teneff
quelle
Wenn Sie ein Framework wie Foundation CSS verwenden, funktioniert dies nicht ohne Hinzufügen von! wichtig.
Petros Kyriakou
16

Stellen Sie es in der Körperauswahl Ihres CSS ein. Z.B

body {
    font: 16px Arial, sans-serif;
}
Petecoop
quelle
1
Dies kann mit spezifischeren Selektoren überschrieben werden.
StuperUser
2
Es würde nicht für alle Elemente gelten, zum Beispiel: input type = 'button'
RRTW
12

Verwenden Sie das folgende CSS:

* {
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}

Der *-selector bedeutet alle Elemente, befindet sich jedoch offensichtlich am Ende der Nahrungskette, wenn es darum geht, spezifischere Selektoren zu überschreiben .

Beachten Sie, dass das !importantFlag den fontStil für *absolut wiedergibt , auch wenn andere Selektoren zum Festlegen des Texts verwendet wurden (z. B. das bodyoder möglicherweise a p).

karllindmark
quelle
1
Dies !importantwürde möglicherweise verhindern, dass andere Selektoren die Einstellungen überschreiben.
Quasdunk
1
Ja, !importantwürde verhindern , dass andere Selektoren überschreiben, solange sie es nicht auch verwenden. Heh. Ich werde meinen Beitrag bearbeiten und hinzufügen - danke. :-)
Karllindmark
Ja, das stimmt. Ich bin mir nicht ganz sicher, aber ich denke, die Präferenz hängt auch davon ab, wo Sie die Erklärung abgeben. Wenn Sie es ganz unten platzieren, kann ich auch das !importants aus den spezifischeren Selektoren oben überschreiben . Aber das ist hier nicht ganz der Punkt, denke ich :)
Quasdunk
Dies ist die einzige Antwort, die tatsächlich für mich funktioniert hat. Ich weiß nicht warum, aber es tat es.
Peter Gordon
5

Sie sollten niemals verwenden * + !important. Was ist, wenn Sie die Schriftart in einigen Teilen Ihres HTML-Dokuments ändern möchten? Sie sollten immer Körper ohne wichtig verwenden. Verwenden Sie !importantnur , wenn es keine andere Möglichkeit gibt.

Rakowu
quelle
0

Versuche dies:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}
anglimasS
quelle
Hallo Anglimass, ich habe Ihren Code formatiert. Wenn Sie 4 Leerzeichen oder die {}Schaltfläche verwenden, können Sie in Ihren Antworten Beispielcode auf diese Weise anzeigen.
StuperUser