Applicazione di un singolo carattere a un intero sito Web con CSS

91

Voglio usare un singolo carattere chiamato "Algerian" in tutto il mio sito web. Quindi, devo modificare tutti i tag HTML e non voglio scrivere codice diverso per tag diversi come:

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

Anche il metodo scritto di seguito è altamente sconsigliato:

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

— Michelle Smith
fonte

3

font-family è un valore ereditato, quindi perché non definirlo semplicemente sul corpo?

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

— okm

possibile duplicato di Come applicare il carattere globale all'intero documento HTML

— davidcondrey

Ti suggerisco di non usare mai la risposta di (Jan Hančič) perché applica il tuo carattere a tutti i tag html, anche al tag che non ti piace cambiare. per esempio: se crei un tag img all'interno di un tag td e lo rendi text-align: center e vertical-align: middle. utilizzando in questo modo il tuo tag img non sarà mai il centro del TD. il modo migliore: controlla il tuo documento e applica il formato del carattere ai tag che

— contengono dei

109

Metti la font-familydichiarazione in un bodyselettore:

body {
  font-family: Algerian;
}

Tutti gli elementi sulla tua pagina erediteranno questa famiglia di caratteri (a meno che, ovviamente, non la sovrascrivi in seguito).

— Jan Hančič
fonte

11

Un elemento eredita font-familydal suo genitore solo quando nessun foglio di stile imposta la famiglia di caratteri per l'elemento. I fogli di stile del browser in genere impostato famiglia almeno per carattere input, textarea, code, tt, e pregli elementi.

— Jukka K. Korpela

Hai ragione. Ho lavorato con i ripristini CSS per così tanto tempo che dimentico questo genere di cose :)

— Jan Hančič

O meglio ancora, combina le due risposte migliori ... body, * {font-family: Algerian;}

— james ace

105

*{font-family:Algerian;}

soluzione migliore di seguito Applicazione di un singolo carattere a un intero sito Web con CSS

— Salam El-Banna
fonte

3

È interessante notare che questo non funziona quando si utilizza il ripristino CSS di Eric Meyer

— ianbeks

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

— Max Strater

Poiché la regola universale non è sovrascrivibile, non potrai utilizzare un secondo carattere sul tuo sito.

— Julian F. Weinert

Dato che nessuno lo ha menzionato, il selettore universale è noto per essere lento. di più su questo qui: clairecodes.com/blog/…

— Terje Solem

O meglio ancora, combina le due risposte migliori ... body, * {font-family: Algerian;}

— james ace

48

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

*{
  font-family:Algerian;
}

Ma sfortunatamente se stai usando le icone FontAwesome , o qualsiasi icona che richiede la propria famiglia di caratteri, questo distruggerà semplicemente le icone e non mostreranno la vista richiesta.

Per evitare ciò puoi usare il :notselettore, un esempio di icona fontawesome è <i class="fa fa-bluetooth"></i>, quindi puoi semplicemente usare:

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

questo applicherà questa famiglia a tutti gli elementi nel documento tranne gli elementi con il nome del tag <i>, puoi farlo anche per le classi:

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

questo applicherà questa famiglia a tutti gli elementi nel documento tranne gli elementi con la classe "fa" che si riferisce alla classe predefinita di fontawesome, puoi anche scegliere come target più di una classe come questa:

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

— Salam El-Banna
fonte

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 fantastici

— Lakshman

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

— Mahdi Jazini

19

Assicurati che i dispositivi mobili non cambino il carattere con il loro carattere predefinito utilizzando importante insieme al selettore universale *:

* { font-family: Algerian !important;}

— gabitzish
fonte

18

* { font-family: Algerian; }

Il selettore universale si *riferisce a qualsiasi elemento.

— Jukka K. Korpela
fonte

3

Poiché è probabile che un carattere diverso sia già definito dal browser per gli elementi del modulo, ecco 2 modi per utilizzare questo carattere ovunque:

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

body {
    font-family: Algerian !important;
}

Ci sarà ancora un carattere a spaziatura fissa su elementi come pre / code, kbd, ecc. Ma, nel caso in cui si utilizzino questi elementi, è meglio utilizzare un carattere a spaziatura fissa lì.

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

(*) il corsivo predefinito su Windows è Comic Sans. Tranne se vuoi trollare gli utenti Windows, non farlo :) Questo font è terribile tranne che per i compleanni dei tuoi figli dove è il benvenuto.

— FelipeAls
fonte

2

Inseriscilo nell'intestazione delle tue pagine se il "corpo" richiede l'uso di 1 e lo stesso carattere:

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

Tutto ciò che si trova tra i tag <body>e </body>avrà lo stesso carattere

— PICwebs
fonte

1

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

Il carattere che sto usando è Ubuntu-LI, ho creato una cartella dei caratteri nella mia directory di lavoro. sotto la cartella caratteri

Sono stato in grado di applicarlo ... alla fine ecco il mio codice funzionante

Volevo che questo si applicasse a tutto il mio sito Web, quindi l'ho inserito nella parte superiore del documento CSS. soprattutto dei tag Div (non che sia importante, sappi solo che ogni singolo carattere che assegni al tuo script avrà 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 poi volessi che tutti i miei tag H1 fossero qualcos'altro, diciamo sans sarif farei qualcosa di simile

h1{
   font-family: Sans-sarif;
}

In questo caso solo i miei tag H1 sarebbero il carattere sans-sarif e il resto della mia pagina sarebbe il carattere Ubuntu-LI

— Lee Alderman
fonte

0

in Bootstrap, il web inspector dice che le intestazioni sono impostate su "eredita"

tutto ciò di cui avevo bisogno per impostare la mia pagina con il nuovo carattere era

div, p {font-family: Algerian}

che è in .scss

— austin
fonte

-1

*{font-family:Algerian;}

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

Sembra fantastico - grazie!

— intelijenjah
fonte