Come applicare il carattere globale all'intero documento HTML

175

Ho una pagina HTML che include testo e formattazione. Voglio farlo avere la stessa famiglia di caratteri e le stesse dimensioni del testo ignorando tutta la formattazione interna del testo.

Voglio impostare un formato di carattere globale per la pagina HTML.

Come posso raggiungere questo obiettivo?

html css font-family

— Dolcemente
fonte

263

Dovresti essere in grado di utilizzare l'asterisco e gli !importantelementi all'interno dei CSS.

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

L'asterisco corrisponde a tutto (probabilmente potresti scappare anche senza html).

Le !importantassicura che nulla possono ignorare quello che hai impostato in questo stile (a meno che sia anche importante). (questo per aiutare con il tuo requisito che dovrebbe "ignorare la formattazione interna del testo" - che ho preso per significare che altri stili non potevano sovrascriverli)

Il resto dello stile all'interno delle parentesi graffe è proprio come qualsiasi altro stile e puoi fare qualsiasi cosa tu voglia fare lì. Ho scelto di cambiare la dimensione del carattere, il colore e la famiglia come esempio.

— Amadiere
fonte

24

+1 !importantè utile, ma può diventare un po '"thar be monsters" se viene abusato.

— StuperUser

2

+1 per fornire un ottimo uso di !important. Deve essere sempre usato come ultima opzione.

— dShringi,

3

Si noti che l'uso di !importantquesto è dovuto al requisito del poster originale, "avere la stessa famiglia di caratteri e le stesse dimensioni del testo ignorando tutta la formattazione interna del testo". Se non si dispone di tale requisito, non si desidera utilizzare !important.

— Seth,

1

L'uso di html * {}o body * {}ti aiuterà a evitare l'override attraverso più specifici body p {}nei fogli di stile inclusi. body p {}è più specifico di body {}, quindi l'asterisco è un elemento importante qui.

— YoYo

1

Penso che tu possa htmlhtml *

— ometterti

44

La migliore pratica penso sia quella di impostare il carattere sul corpo:

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

e se decidi di cambiarlo per qualche elemento, potrebbe essere facilmente sovrascritto:

h2, h3 {
    font-size: 14px;
}

— Teneff
fonte

se stai usando un framework come foundation css questo non funziona senza aggiungere! important.

— Petros Kyriakou,

16

Impostalo nel selettore del corpo del tuo CSS. Per esempio

body {
    font: 16px Arial, sans-serif;
}

— Petecoop
fonte

1

Questo può essere ignorato con selettori più specifici.

— StuperUser

2

Non si applica a tutti gli elementi, ad esempio: input type = 'button'

— RRTW

12

Usa i seguenti css:

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

Il *selettore indica tutti / tutti gli elementi, ma sarà ovviamente in fondo alla catena alimentare quando si tratterà di scavalcare selettori più specifici .

Nota che !important-flag renderà lo fontstile per *essere assoluto, anche se sono stati usati altri selettori per impostare il testo (ad esempio, bodyo forse a p).

— karllindmark
fonte

1

Forse !importantimpedirebbe ad altri selettori di ignorare le impostazioni.

— Quasdunk,

1

Bene, sì, !importantimpedirebbe ad altri selettori di prevalere, purché non lo utilizzino. Eh. Modificherò il mio post e lo aggiungerò - grazie. :-)

— karllindmark l'

Sì, esatto. Non sono sicuro, ma penso che la preferenza dipenda anche da dove si colloca la dichiarazione. Se lo metti in fondo, potrei anche sostituire la !importants dai selettori più specifici sopra. Ma non è questo il punto qui immagino :)

— Quasdunk l'

Questa è l'unica risposta che ha funzionato davvero per me. Non so perché, ma lo ha fatto.

— Peter Gordon,

5

Non dovresti mai usare * + !important. Cosa succede se si desidera modificare il carattere in alcune parti del documento HTML? Dovresti sempre usare il corpo senza importanza. Utilizzare !importantsolo se non c'è altra opzione.

— Rakowu
fonte

1

Prova questo:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}

— anglimasS
fonte

Ciao anglimass, ho formattato il tuo codice, se usi 4 spazi o il {}pulsante puoi visualizzare il codice di esempio in questo modo nelle tue risposte.

— StuperUser