Comment appliquer une police globale à l'ensemble du document HTML

175

J'ai une page HTML qui comprend du texte et du formatage. Je veux lui donner la même famille de polices et la même taille de texte en ignorant toute mise en forme interne du texte.

Je souhaite définir un format de police global pour la page HTML.

Comment puis-je atteindre cet objectif?

html css font-family Chérie
la source

Réponses:

263

Vous devriez pouvoir utiliser l'astérisque et les !importantéléments dans CSS.

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

L'astérisque correspond à tout (vous pourriez probablement vous en passer sans htmltrop).

Le !importantgarantit que rien ne peut remplacer ce que vous avez défini dans ce style (sauf si cela est également important). (ceci est pour aider avec votre exigence qu'il devrait "ignorer le formatage interne du texte" - ce que j'ai pris pour signifier que d'autres styles ne pouvaient pas les écraser)

Le reste du style dans les accolades est comme n'importe quel autre style et vous pouvez y faire ce que vous voulez. J'ai choisi de changer la taille, la couleur et la famille de la police à titre d'exemple.

Amadière
la source
24
+1 !importantest utile, mais il peut devenir un peu "ce sont des monstres" s'il est surutilisé.
StuperUser
2
+1 pour offrir une excellente utilisation de !important. Il doit toujours être utilisé comme dernière option.
dShringi
3
Notez que l'utilisation de !importantici est due à l'exigence de l'affiche originale, "avoir la même famille de polices et la même taille de texte en ignorant toute mise en forme interne du texte." Si vous n'avez pas cette exigence, vous ne souhaitez pas utiliser !important.
Seth
1
L'utilisation de html * {}ou body * {}vous aidera à éviter le remplacement par des body p {}feuilles de style plus spécifiques . body p {}est plus spécifique que body {}, donc l'astérisque est un élément important ici.
YoYo
1
Je pense que vous pouvez omettre htmld' html *ici
JonnyRaa
44

Je pense que la meilleure pratique consiste à définir la police sur le corps:

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

et si vous décidez de le changer pour un élément, il pourrait être facilement écrasé:

h2, h3 {
    font-size: 14px;
}
Teneff
la source
si vous utilisez un framework comme le css de base, cela ne fonctionne pas sans ajouter! important.
Petros Kyriakou
16

Réglez-le dans le sélecteur de corps de votre css. Par exemple

body {
    font: 16px Arial, sans-serif;
}
Petecoop
la source
1
Cela peut être remplacé par des sélecteurs plus spécifiques.
StuperUser
2
Cela ne s'appliquerait pas à tous les éléments, par exemple: input type = 'button'
RRTW
12

Utilisez le css suivant:

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

Le *-sélecteur signifie tout / tous les éléments, mais sera évidemment au bas de la chaîne alimentaire lorsqu'il s'agira de remplacer des sélecteurs plus spécifiques .

Notez que le !important-flag rendra le font-style for *absolu, même si d'autres sélecteurs ont été utilisés pour définir le texte (par exemple, le bodyou peut-être a p).

karllindmark
la source
1
Cela !importantempêcherait peut - être d' autres sélecteurs de remplacer les paramètres.
Quasdunk
1
Eh bien, oui, !importantcela empêcherait les autres sélecteurs de passer outre, tant qu'ils ne l'utilisent pas également. Il h. Je vais modifier mon message et l'ajouter - merci. :-)
karllindmark
Oui, c'est vrai. Pas tout à fait sûr, mais je pense que la préférence dépend également de l'endroit où vous placez la déclaration. Si vous le placez tout en bas, je peux également remplacer les !importants des sélecteurs plus spécifiques ci-dessus. Mais ce n'est pas tout à fait le but ici, je suppose :)
Quasdunk
C'est la seule réponse qui a fonctionné pour moi. Je ne sais pas pourquoi, mais c'est le cas.
Peter Gordon
5

Vous ne devriez jamais utiliser * + !important. Que faire si vous souhaitez modifier la police dans certaines parties de votre document HTML? Vous devez toujours utiliser le corps sans importance. Utilisez !importantuniquement s'il n'y a pas d'autre option.

Rakowu
la source
1

Essaye ça:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}
anglimas
la source
Salut anglimass, j'ai formaté votre code, si vous utilisez 4 espaces ou le {}bouton vous pouvez afficher un exemple de code de cette manière dans vos réponses.
StuperUser