2012-04-06 15 views
64

Desidero utilizzare un singolo carattere denominato "algerino" su tutto il mio sito web. Così, ho bisogno di cambiare tutti i tag HTML e io non voglio scrivere codice diverso per i tag diversi, come:Applicazione di un singolo carattere a un intero sito Web con i CSS

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

Il metodo scritto di seguito è anche altamente sconsigliato:

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

font-family è un valore ereditato, quindi perché non solo lo definiscono sul corpo? –

+0

Si consiglia di scegliere la risposta da Jukka K. Korpela. È precedente alla risposta attualmente selezionata, per circa un mese, e ha quasi lo stesso contenuto, comunque. – okm

+0

possibile duplicato di [Come applicare il carattere globale a tutto il documento HTML] (http://stackoverflow.com/questions/7025756/how-to-apply-global-font-to-whole-html-document) – davidcondrey

risposta

68

Mettere il font-family dichiarazione in un selettore body:

body { 
    font-family: Algerian; 
} 

Tutti gli elementi della pagina erediteranno questo font-family allora (a meno che, naturalmente, si Override più tardi).

+8

Un elemento eredita 'font-family' dal suo genitore solo quando * no * foglio di stile imposta la famiglia di caratteri per l'elemento. I fogli di stile del browser in genere impostano la famiglia di font almeno per gli elementi 'input',' textarea', 'code',' tt' e 'pre'. –

+0

Hai ragione. Ho lavorato con resettazioni CSS per così tanto tempo che ho dimenticato questo genere di cose :) –

15
* { font-family: Algerian; } 

Il selettore universale * riferisce a qualsiasi elemento.

2

Come un carattere diverso è probabile che sia già definito dal browser per elementi di modulo, qui ci sono 2 modi per utilizzare questo tipo di carattere in tutto il mondo:

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

body { 
    font-family: Algerian !important; 
} 

ci avrai ancora un font a spaziatura fissa su elementi come pre/code, kbd, ecc ma, nel caso in cui si utilizzino questi elementi, è meglio usare un font monospace.

Nota importante: se pochissime persone hanno questo tipo di carattere installato sul proprio sistema operativo, verrà utilizzato il secondo carattere nell'elenco. Qui hai definito nessun secondo carattere, quindi verrà utilizzato il tipo di carattere Serif predefinito e sarà Times, Times New Roman tranne forse su Linux.
Due opzioni lì: usa @ font-face se il tuo font è gratuito come font scaricabile o aggiungi fallback (s): un secondo, un terzo, ecc. E infine una famiglia predefinita (sans-serif, cursive (*) , monospace o serif). Verrà utilizzato il primo dell'elenco esistente sul sistema operativo dell'utente.

(*) Il corsivo predefinito in Windows è Comic Sans. Tranne se si desidera trollare gli utenti Windows, non farlo :) Questo tipo di carattere è terribile tranne che per i compleanni dei tuoi bambini, dove è il benvenuto.

17

Assicurarsi che i dispositivi mobili non cambierà il carattere con il loro carattere predefinito mediante importante insieme al selettore universale *:

* { font-family: Algerian !important;} 
86
*{font-family:Algerian;} 

DO simili

+2

È interessante notare che questo non funziona quando si utilizza il reset CSS di Eric Meyer. – ianbeks

+0

Non applica la famiglia di caratteri a ogni singolo elemento? Questo sembra che lo applicherebbe a elementi non necessari (come ) e sarebbe inefficiente. Potrei sicuramente sbagliarmi, ma ho letto per usare cautela nell'applicare uno stile a tutto. –

+0

Poiché la regola universale non è sovrascrivibile, non sarà possibile utilizzare un secondo carattere sul sito. –

-1
*{font-family:Algerian;} 

questo html ha funzionato per me Aggiunto alle impostazioni della tela in wordpress.

Sembra fantastico - grazie!

1

Ok, quindi ho riscontrato questo problema in cui ho provato diverse opzioni.

Il font che sto utilizzando è Ubuntu-LI, ho creato una cartella di caratteri nella mia directory di lavoro. sotto cartella di caratteri

ero in grado di applicarlo ... alla fine ecco il mio codice di lavoro

ho voluto questo da applicare a tutto il mio sito web in modo ho messo in cima alla doc css.sopra tutti i tag DIV (Non che sia importante, è sufficiente sapere che ogni individuo font assegnati inviare lo script avranno la precedenza)

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

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

Se dunque io volevo tutti i miei tag H1 di essere qualcos'altro consente di dire sans Sarif vorrei fare qualcosa di simile

h1{ 
    font-family: Sans-sarif; 
} 

Da qual caso solo i miei tag H1 sarebbe il tipo di carattere sans-Sarif e il resto della mia pagina sarebbe il tipo di carattere Ubuntu-LI

0

Si prega di collocare questo nella testa della tua (e) pagina (e) se il "corpo" ha bisogno dell'uso di 1 e dello stesso carattere:

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

Tutto tra i tag <body> e </body> avrà lo stesso tipo di carattere

20

Il selettore universale * si riferisce a tutti gli elementi, questo css lo farà per voi:

*{ 
    font-family:Algerian; 
} 

Ma purtroppo se si utilizzano le icone FontAwesome o qualsiasi Icone che richiede la propria famiglia di caratteri, ciò semplicemente distruggerà le icone e non mostrerà la vista richiesta.

per evitare questo è possibile utilizzare il selettore :not, un campione di un'icona fontawesome è <i class="fa fa-bluetooth"></i>, così semplicemente si può usare:

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

questo si applica questa famiglia a tutti gli elementi del documento, tranne gli elementi con il nome del tag <i>, è anche possibile farlo per le classi:

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

questo si applica questa famiglia a tutti gli elementi presenti nel documento, eccetto gli elementi con la classe "fa" che si riferisce alla fontawesome Sottotito Classe lt, è anche possibile indirizzare più di una classe come questa:

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

Questa risposta fornisce un dettaglio molto necessario in base all'uso corrente dello stile nelle pagine Web a causa dell'uso di icone da bootstrap (glyphicons) e font impressionante – Lakshman

+0

Nota: (non selettore) è CSS3 che non è compatibile con tutti i browser. IE 9+ dobbiamo aspettare almeno 10 anni per tutte le persone in tutto il mondo per lasciare le famiglie IE -9 per sempre: D: '( –

Problemi correlati