Anwenden einer einzelnen Schriftart auf eine gesamte Website mit CSS

91

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

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

Von der unten beschriebenen Methode wird ebenfalls dringend abgeraten:

div,button,span,strong{font-family:Algerian;}
html css fonts font-face Michelle Smith
quelle
3
Die Schriftfamilie ist ein geerbter Wert. Warum also nicht einfach auf dem Körper definieren?
Vielleicht möchten Sie die Antwort von Jukka K. Korpela wählen. Es ist ungefähr einen Monat früher als die aktuell ausgewählte Antwort und hat sowieso fast den gleichen Inhalt.
Ok,
Mögliches Duplikat von Wie man globale Schrift auf das gesamte HTML-Dokument
anwendet
Ich schlage vor, Sie verwenden niemals die Antwort von (Jan Hančič), da Ihre Schriftart auf alle HTML-Tags angewendet wird, auch auf das Tag, das Sie nicht ändern möchten. Beispiel: Wenn Sie ein img-Tag in einem td-Tag erstellen und es textausrichten: Mitte und vertikal ausrichten: Mitte. Auf diese Weise wird Ihr img-Tag niemals das Zentrum des TD sein. Der beste Weg: Überprüfen Sie Ihr Dokument und wenden Sie einfach das Schriftformat auf die Tags an, die Texte enthalten
Mahdi Jazini

Antworten:

107

Geben Sie die font-familyErklärung in einen bodySelektor ein:

body {
  font-family: Algerian;
}

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

Jan Hančič
quelle
11
Ein Element erbt font-familynur dann von seinem übergeordneten Element, wenn kein Stylesheet die Schriftfamilie für das Element festlegt. Browser - Stylesheets typischerweise eingestellt Schriftfamilie zumindest für input, textarea, code, tt, und preElemente.
Jukka K. Korpela
Du hast recht. Ich habe so lange mit CSS-Resets gearbeitet, dass ich
solche
Oder noch besser, kombinieren Sie die beiden Top-Antworten ... body, * {font-family: Algerian;}
james ace
104 
*{font-family:Algerian;}

Bessere Lösung unten Anwenden einer einzelnen Schriftart auf eine gesamte Website mit CSS

Salam El-Banna
quelle
3
Interessanterweise funktioniert dies nicht, wenn Eric Meyers CSS-Reset verwendet wird
ianbeks
Wendet das nicht die Schriftfamilie auf jedes einzelne Element an? Dies scheint, als würde es auf unnötige Elemente (wie <img>) angewendet und wäre ineffizient. Ich könnte mich definitiv irren, aber ich habe gelesen, dass ich vorsichtig sein sollte, wenn ich auf alles einen Stil anwende.
Max Strater
Da die universelle Regel nicht überschreibbar ist, können Sie auf Ihrer Site keine zweite Schriftart verwenden.
Julian F. Weinert
Da Noboy dies erwähnt hat, ist bekannt, dass der universelle Selektor langsam ist. mehr dazu hier: clairecodes.com/blog/…
Terje Solem
Oder noch besser, kombinieren Sie die beiden Top-Antworten ... body, * {font-family: Algerian;}
james ace
48

Der universelle Selektor *bezieht sich auf alle Elemente, diese CSS erledigt dies 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 dadurch einfach zerstört und die erforderliche Ansicht wird nicht angezeigt .

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

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

Dadurch wird diese Familie auf alle Elemente im Dokument <i>angewendet, mit Ausnahme der Elemente mit dem Tag-Namen . 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 eine Standardklasse bezieht. Sie können auch mehrere Klassen wie diese als Ziel festlegen:

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
Salam El-Banna
quelle
Diese Antwort enthält ein dringend benötigtes Detail gemäß der aktuellen Verwendung von Styling auf Webseiten aufgrund der Verwendung von Symbolen aus Bootstrap (Glyphicons) und Font Awesome
Lakshman
Bitte beachten Sie als: (nicht Selektor) ist CSS3, das nicht mit allen Browsern kompatibel ist. IE 9+ Wir müssen mindestens 10 Jahre warten, bis alle Menschen auf der ganzen Welt IE-9-Familien für immer verlassen haben: D: '(
Mahdi Jazini
19

Stellen Sie sicher, dass mobile Geräte die Schriftart nicht mit ihrer Standardschriftart ändern, indem Sie wichtig zusammen mit dem universellen Selektor * verwenden:

* { font-family: Algerian !important;}
gabitzisch
quelle
18 
* { font-family: Algerian; }

Der universelle Selektor *bezieht sich auf ein beliebiges Element.

Jukka K. Korpela
quelle
3

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

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

body {
    font-family: Algerian !important;
}

Es wird immer noch eine Monospace-Schriftart für Elemente wie Pre / Code, KBD usw. geben. Wenn Sie diese Elemente verwenden, sollten Sie dort besser eine Monospace-Schriftart verwenden.

Wichtiger Hinweis: Wenn nur sehr wenige Benutzer diese Schriftart auf ihrem Betriebssystem installiert haben, wird die zweite Schriftart in der Liste verwendet. Hier haben Sie keine zweite Schriftart definiert, sodass die Standard-Serifenschrift verwendet wird, und es wird Times, Times New Roman sein, außer vielleicht unter Linux.
Zwei Optionen: Verwenden Sie @ font-face, wenn Ihre Schriftart nicht als herunterladbare Schriftart verwendet werden kann, oder fügen Sie Fallbacks hinzu: eine zweite, eine dritte usw. und schließlich eine Standardfamilie (serifenlos, kursiv (*), Monospace) oder Serife). Der erste Teil der Liste, der auf dem Betriebssystem des Benutzers vorhanden ist, wird verwendet.

(*) Unter Windows ist Comic Sans standardmäßig kursiv. Außer wenn Sie Windows-Benutzer trollen möchten, tun Sie das nicht :) Diese Schriftart ist schrecklich, außer für die Geburtstage Ihrer Kinder, an denen sie willkommen ist.

FelipeAls
quelle
2

Bitte platzieren Sie dies im Kopf Ihrer Seite (n), wenn der "Körper" die Verwendung von 1 und derselben Schriftart benötigt:

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

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

PICwebs
quelle
1

Ok, ich hatte dieses Problem, bei dem ich verschiedene Optionen ausprobiert habe.

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

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

Ich wollte, dass dies auf meine gesamte Website zutrifft, also habe ich es oben in das CSS-Dokument eingefügt. vor allem die Div-Tags (nicht, dass es darauf ankommt, wissen Sie nur, dass alle einzelnen Schriftarten, die Sie nach Ihrem Skript zuweisen, 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 ohne Sarif, würde ich so etwas tun 

h1{
   font-family: Sans-sarif;
}

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

Lee Alderman
quelle
0

In Bootstrap gibt der Webinspektor an, dass die Überschriften auf "erben" gesetzt sind.

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

div, p {font-family: Algerian}

das ist in .scss

Austin
quelle
-1 
*{font-family:Algerian;}

Dieses HTML hat bei mir funktioniert. Zu den Canvas-Einstellungen in WordPress hinzugefügt.

Sieht cool aus - danke!

intelijenjah
quelle