Appliquer une seule police à un site Web entier avec CSS

92

Je souhaite utiliser une seule police nommée "Algérien" sur tout 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 écrite ci-dessous est également fortement déconseillée:

div,button,span,strong{font-family:Algerian;}
html css fonts font-face Michelle Smith
la source
3
font-family est une valeur héritée, alors pourquoi ne pas simplement la définir sur le corps?
Vous pouvez choisir la réponse de Jukka K. Korpela. C'est plus tôt que la réponse choisie actuelle, pendant environ un mois, et a presque le même contenu, de toute façon.
okm
duplication possible de Comment appliquer la police globale à l'ensemble du document HTML
davidcondrey
Je vous suggère de ne jamais utiliser la réponse de (Jan Hančič) car elle applique votre police à toutes les balises html, même la balise que vous n'aimez pas changer. par exemple: si vous créez une balise img à l'intérieur d'une balise td et l'avez faite text-align: center et vertical-align: middle. en utilisant cette méthode, votre balise img ne sera jamais au centre du TD. le meilleur moyen: vérifiez votre document et appliquez simplement le format de police aux balises
contenant du

Réponses:

112

Mettez la font-familydéclaration dans un bodysélecteur:

body {
  font-family: Algerian;
}

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

Jan Hančič
la source
11
Un élément n'hérite font-familyde son parent que lorsqu'aucune feuille de style ne définit la famille de polices de l'élément. Feuilles de style du navigateur généralement mis en famille de polices au moins input, textarea, code, ttet des preéléments.
Jukka K. Korpela
Vous avez raison. Je travaille avec des réinitialisations CSS depuis si longtemps que j'oublie ce genre de choses :)
Jan Hančič
Ou mieux encore, combinez les deux principales réponses ... body, * {font-family: Algerian;}
james ace
105 
*{font-family:Algerian;}

meilleure solution ci-dessous Appliquer une seule police à un site Web entier avec CSS

Salam El-Banna
la source
3
Fait intéressant, cela ne fonctionne pas lors de l'utilisation de la réinitialisation CSS d'Eric Meyer
ianbeks
Cela ne s'applique-t-il pas à la famille de polices à chaque élément? Cela semble s'appliquer à des éléments inutiles (comme <img>) et être inefficace. Je pourrais certainement me tromper, mais j'ai lu qu'il fallait faire preuve de prudence en appliquant un style à tout.
Max Strater
La règle universelle ne pouvant pas être remplacée, vous ne pourrez pas utiliser une deuxième police sur votre site.
Julian F. Weinert
Depuis que noboy a mentionné cela, le sélecteur universel est connu pour être lent. plus à ce sujet ici: clairecodes.com/blog/…
Terje Solem
Ou mieux encore, combinez les deux principales réponses ... body, * {font-family: Algerian;}
james ace
48

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 des icônes FontAwesome ou des icônes nécessitant 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 le :notsélecteur, un exemple d'icône fontawesome <i class="fa fa-bluetooth"></i>, donc vous pouvez simplement utiliser:

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

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

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

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

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
Salam El-Banna
la source
Cette réponse donne un détail indispensable selon l'utilisation actuelle du style dans les pages Web en raison de l'utilisation d'icônes de bootstrap (glyphicons) et de font awesome
Lakshman
veuillez noter que: (pas de sélecteur) est CSS3 qui n'est pas compatible avec tous les navigateurs. IE 9+ nous devons attendre au moins 10 ans pour que toutes les personnes dans le monde quittent pour toujours les familles IE -9: D: '(
Mahdi Jazini
19

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;}
gabitzish
la source
18 
* { font-family: Algerian; }

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

Jukka K. Korpela
la source
3

Comme une police différente est susceptible d'être déjà définie par le navigateur pour les éléments de formulaire, voici 2 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 comme pre / code, kbd, etc. mais, si vous utilisez ces éléments, vous feriez mieux d'utiliser une police monospace là-bas.

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 deuxième police, donc la police serif par défaut sera utilisée, et ce sera Times, Times New Roman sauf peut-être sous Linux.
Deux options ici: utilisez @ font-face si votre police est libre d'utilisation en tant que 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. Sauf si vous voulez troller les utilisateurs de Windows, ne faites pas ça :) Cette police est terrible sauf pour les anniversaires de vos enfants où elle est la bienvenue.

FelipeAls
la source
2

Veuillez placer ceci dans l'en-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 entre les balises <body>et </body>aura la même police

PICwebs
la source
1

Ok, donc 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 le dossier polices

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

Je voulais que cela s'applique à l'ensemble de mon site Web, alors je l'ai mis en haut de la doc css. au-dessus de toutes les balises Div (peu importe, sachez simplement que toutes les polices individuelles que vous attribuez après 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 ensuite que toutes mes balises H1 soient quelque chose d'autre, disons sans sarif, je ferais quelque chose comme 

h1{
   font-family: Sans-sarif;
}

A partir de quel cas seules mes balises H1 seraient la police sans-sarif et le reste de ma page serait la police Ubuntu-LI

Lee Alderman
la source
0

dans Bootstrap, l'inspecteur Web indique que les titres sont définis pour `` hériter ''

tout ce dont j'avais besoin pour définir ma page avec la nouvelle police était 

div, p {font-family: Algerian}

c'est en .scss

Austin
la source
-1 
*{font-family:Algerian;}

ce html a fonctionné pour moi. Ajouté aux paramètres de canevas dans wordpress.

Ça a l'air cool - merci!

intelijenjah
la source