Appliquer une seule police à l'ensemble d'un site Web avec CSS

Question

Je veux utiliser une seule police nommée "Algerian" sur l'ensemble de mon site Web. Je dois donc modifier toutes les balises HTML et je ne veux pas écrire de code différent pour les différentes balises :

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

La méthode décrite ci-dessous est également fortement déconseillée :

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

Answer 1

Mettez le font-family dans une déclaration body sélecteur :

body {
  font-family: Algerian;
}

Tous les éléments de votre page hériteront alors de cette famille de caractères (à moins, bien sûr, que vous ne la remplaciez plus tard).

Answer 2

*{font-family:Algerian;}

meilleure solution ci-dessous Appliquer une seule police à l'ensemble d'un site Web avec CSS

Answer 3

Le sélecteur universel * se réfère à tous les éléments, ce css le fera pour vous :

*{
  font-family:Algerian;
}

Mais malheureusement, si vous utilisez FontAwesome ou toutes les icônes qui nécessitent leur propre famille de polices, cela détruira simplement les icônes et elles n'afficheront pas la vue requise.

Pour éviter cela, vous pouvez utiliser l'option :not un échantillon de l'icône fontawesome est <i class="fa fa-bluetooth"></i> Vous pouvez donc simplement l'utiliser :

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

ceci appliquera cette famille à tous les éléments du document, à l'exception des éléments portant le nom de la balise <i> vous pouvez aussi le faire pour les cours :

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

cela appliquera cette famille à tous les éléments du document, à l'exception des éléments ayant la classe "fa", qui fait référence à la classe par défaut de fontawesome, vous pouvez également cibler plus d'une classe comme ceci :

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

Answer 4

Assurez-vous que les appareils mobiles ne changeront pas la police avec leur police par défaut en utilisant important avec le sélecteur universel * :

* { font-family: Algerian !important;}

Answer 5

* { font-family: Algerian; }

Le sélecteur universel * fait référence à n'importe quel élément.