web-dev-qa-db-fra.com

Application d'une police unique à un site Web entier avec CSS

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

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;}
htmlcssfontsfont-face
79
Michelle Smith

Placez la déclaration font-family dans un sélecteur body:

body {
  font-family: Algerian;
}

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

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

Fait comme ça

92
user1432124

Le sélecteur universel * fait référence à tous les éléments, Ce css le fera pour vous:

*{
  font-family:Algerian;
}

Mais malheureusement, si vous utilisez FontAwesome icons, ou des icônes nécessitant leur propre famille de polices, les icônes seront simplement détruites et elles ne montreront pas la vue requise.

Pour éviter cela, vous pouvez utiliser le sélecteur :not, un exemple d'icône de fontawesome est <i class="fa fa-bluetooth"></i>, vous pouvez donc simplement utiliser:

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

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

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

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

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

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

16
Jukka K. Korpela

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

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

Comme une police différente est probablement déjà définie par le navigateur pour les éléments de formulaire, il existe deux façons d'utiliser cette police partout:

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

body {
    font-family: Algerian !important;
}

Il y aura toujours une police monospace sur des éléments tels que pré/code, kbd, etc., mais si vous utilisez ces éléments, vous feriez mieux d'utiliser une police monospace.

Remarque importante: si très peu de personnes ont cette police installée sur leur système d'exploitation, la deuxième police de la liste sera utilisée. Ici, vous n'avez défini aucune seconde police, donc la police par défaut sera utilisée, et ce sera Times, Times New Roman, sauf peut-être sous Linux.
Deux options sont disponibles: utilisez @ font-face si votre police est libre d’utilisation comme police téléchargeable ou ajoutez des solutions de secours: une seconde, une troisième, etc. et enfin une famille par défaut (sans-serif, cursive (* ), monospace ou serif). Le premier de la liste qui existe sur le système d'exploitation de l'utilisateur sera utilisé.

(*) La cursive par défaut sous Windows est Comic Sans. Ne faites pas cela sauf si vous voulez suivre les utilisateurs de Windows :) Cette police est terrible sauf pour les anniversaires de vos enfants où elle est la bienvenue.

2
FelipeAls

Veuillez placer ceci dans la tête de votre/vos page (s) si le "corps" nécessite l'utilisation de 1 et de la même police:

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

Tout ce qui est entre les balises <body> et </body> aura la même police

1
PICwebs

Ok, j'avais ce problème où j'ai essayé plusieurs options différentes. 

La police que j'utilise est Ubuntu-LI. J'ai créé un dossier de polices dans mon répertoire de travail. sous les polices de dossier

J'ai pu l'appliquer ... enfin voici mon code de travail

Je voulais que cela s'applique à l'ensemble de mon site, je l'ai donc placé en haut de la doc css. au-dessus de tous les tags Div (pas que ça compte, sachez que les polices individuelles que vous affectez à votre script auront la priorité)

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

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

Si je voulais alors que toutes mes balises H1 soient quelque chose d'autre, disons sans sarif je ferais quelque chose comme 

h1{
   font-family: Sans-sarif;
}

Dans ce cas, seules mes balises H1 seraient la police sans-sarif et le reste de ma page, la police Ubuntu-LI

1
Lee Alderman

dans l'inspecteur web Bootstrap, indique que les en-têtes sont configurés pour "hériter"

tout ce dont j'avais besoin pour régler ma page sur la nouvelle police était 

div, p {font-family: Algerian}

c'est en .scss

0
austin